Next Time

This clock demonstrates the limits of isomorphic rendering when the server does not have all the client knowledge. This could be when the server does not have user data to do rendering, or is being exported as static website at build time rather than request time.

In this case, the server does not know the local time of the user, so in order for the server rendered page to match the client's first render and avoid the client needing to redraw the whole app, the state the server uses at build time needs to match the initial state the client uses for first render. This clock renders midnight on both sides, only for the client to do a second render with the local time once the clock component is mounted.

screenshot of next time clock with hands overlaid
example clock at about twelve, four or eight forty in the morning or aternoon

The clock is constructed from variations of the zeit logo. The minute hand is the white triangle oriented with the thick edge on the right. The hour hand is the black triangle, and you have to know within four hours what time of day it is in order to work out what the hour hand is pointing to.

. . .