Layout breaks on refresh

Current behavior: Page refresh causes layout to break.

This does not happen in development mode. Only on a production build, deployed.

• We don’t use nth child, only :nth-of-type. This can be used right? I don’t see anything in the docs that say otherwise
• We use breakpoints
• This page is rendered with SSR (by NextJS)

Is there any advice on how I can reproduce this? Or narrow down?

Also: it does not always happen. Only after some time it has been deployed. Like a few hours. Caching problems?

I’m having a bit of a hard time finding things to look towards on how to reproduce this or narrow down to a specific part. I understand that it is my job when filing a bug in this repo to give a reproduction. But I’m sort of out of things to look towards to solve this.

To reproduce: Do a page refresh on a specific page.

Expected behavior: Layout does not break on second page refresh.

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.8.2
• nextjs version: 11.1.4

[Andarist]

However: why is it so that the first request, it does not matter; but the second, it messes up the layout.

It’s pretty consistently broken for me. It doesn’t matter “which request” I’m testing at any given moment. Maybe your “first request” doesn’t visit this page directly? And subsequent requests are just direct reloads on that page?

[srmagura]

Nice investigation Andarist 😀

The server is on UTC, but the client is indeed likely to be in another timezone.

And this is one of the several reasons why I don’t do SSR unless it’s truly necessary 😂. I’ve solved this problem in the past by storing the user’s time zone so that the server can use that time zone when generating the HTML. The user time zone could be stored in the Users table in the database or encoded into the auth token. But if your app allows anonymous visitors, that makes this a lot harder and I don’t know how to handle that.