Next 13 app router with time sensitive styles

[sour pilot]

Hello, I'm working in a project which has a feature that changes styles/images based on the users system clock.

Since it uses the app router with on demand revalidation, there is an issue where the server sends HTML to the browser at the point the page was generated (let's say 9AM) with a certain set of styles.

Then, the client side code kick in. The user's system clock is at 8PM, and the code changes the styles. But there is a brief moment where the page is rendered but the client side code hasn't triggered yet causing an effect very similar to "FOUC".

Has anyone worked on a similar use case?

[midnight marten]

You have two choices:

• Server-side rendering by determining the timezone from the request - by taking request IP and look it up and guess the timezone. Then with that timezone you can render the correct content that won’t be flashed away in the client. But this assumes you have an ip lookup tool powerful enough for this purpose which is not so easy.
• Or hide the server-side rendered content/show a loading state, before the client-side javascript loads, takes the system time and renders accordingly