Blog post preview list gets inconsistent after hydration

[dcsaszar]

Leaving this here for reference and to discuss a fix:

Because of timezone differences on the prerendering server and the client, the list of blog posts, with month separators, can become inconsistent after hydration.
In our case, we had a month separator that moved to another position, because the post was on the last of a month and on the first of the following month in the server-side vs. client-side render.

After hydration this left us with "dead" DOM elements, that were not removed by React, even with a rerender by calling setState.
Quoting from facebook/react#10591:

A rare but plausible scenario is that you have a list or something that depends on time to determine the order. E.g. something that conditionally pushes something on the top of a list if some time has elapsed. Or changes the the class name based on time elapsing. These cases are very theoretical though. I haven't seen one yet.

This is the "plausible scenario" in the wild. 🎉

My suggestion for a fix is twofold:

1. Force a rerender on the client like I did in Fix prerendering time difference in blog post list #282 (which wasn't good enough for a fix)
2. Include this.state.hasMounted in the key attributes of the timeline

This fixed the issue in our case, although I'm not sure if the keying according to SSR/CSR is just working by chance. I suspect this fix works because in the current (broken) version we have the same keys pointing to different DOM locations, which triggers the React SSR patching problem.

[apepper]

How about, that we always use UTC dates. when showing "rough" dates such as day of the month? If we do so the prerender and the client rendering should no longer diverge.

[dcsaszar]

How about, that we always use UTC dates

This may lead to editor confusion. The editor chooses a date for the blog post. After that, the blog post is listed with a different date.