How to render time properly in web application

Happy new year 🎍🎍🎍

Today, I would like to introduce the problem of time on amazon EC2 server(IaaS).

You know, in EC2, the timezone is set UTC when `new Date();` in Node.js is done.

In SSR -> CSR, when we have time zones like UTC+9 like Japan, time will be displayed for a moment in UTC at the SSR stage and re-rendering in client ‘s time zone afterwards.
This feel very bad for UX.😥

re-rendering from 🆖 3月31(土) 7:10-(UTC) to 🆗 3月31(土) 16:10-(JST)

In order to solve this problem, I have made several attempts.

At first, it is a technique to `visibility: visible;` the element of <time> of the component using time on the Client Side.
However, in this method, the number of digits of time varies depending on the time the user accesses, and the number of rows increased with the rendering.

from 7:10 4letters to 16:10 5letters. That is, the text next(放送予定) to it is shifted.

Finally, I adopted the following plan.

The first access keeps the time zone as “tzoffset” in the cookie and uses that value from the next access to calculate the time zone.

It is only necessary to have a function to pass time zones to Headers, but there is no function in HTTP/1.1 or HTTP/2.0.😢

After all, the time is doubly drawn as before for the first access or the first request when the user moves across the time zone.
However, it was resolved with normal way.I think that this method is a general solution.

Rendering time in Universal (Isomorphic) is a troublesome problem.

Because there is no time difference in Japan, there are not a few services that will fix on UTC + 9 and server side, but we wanted to be displayed in local time because we should correspond to multilingual internationalization in the future.🌏

Have a great year ⛄