Dynamic rehydrated components in GatsbyJS
January 23, 2021
As I mentioned in the previous blog post, this website is based on the GatsbyJS static website generation framework.
Itself based on React, it gave me the opportunity to look at the technology built and promoted by my employer (Facebook) in a new light.
It’s one thing to occasionally work on the presentation layer of internal Facebook services, spending most of that time modifying parts of larger systems already built by hundreds of other fellow engineers, and completely another thing to build a new user interface that’s a complete, self-contained website, from scratch.
I learned to appreciate the ability to semantically define certain elements
to express page structure in more meaningful terms than raw HTML elements like
SPAN. This gives me some strong semantic web
vibes (for those who still remember that concept) - but with just the really useful parts
(semantic model of the document for my own internal consumption and understanding) without
the parts that made the concept unworkable (the complexity of cross-system integration).
One place where I take advantage of that is my resume page: the latest listed position I held has a dynamically calculated duration, expressed in years.
Currently, it shows that I have worked as a Production Engineer at Facebook for 4 years, but on the next March 1st at 9:00 Pacific Time it will automatically flip to 5 years - without you having to reload the web page. If you have the patience, feel free to verify that by visiting my page on the relevant date!
This is a small, barely noticeable gimmick, but it was fun to implement and has been a nice learning experience.
The implementation is pretty straightforward: first, I created a React component that
Date objects - the start date and the current date timestamp.
Then it sets up a timer with an interval of one second that changes the internal state by replacing the current date with a fresh one.
At rendering phase, it uses the
moment JS library (a base dependency of Gatsby)
to calculate a timezone and Gregorian calendar-conscious difference in years
between the start date and the present.
When embedded in a page, Gatsby automatically hydrates this component - so even when all of the content of the website gets pre-rendered on build time, the particular elements generated by this component will keep getting updated by React DOM server automatically within the web browser.
The result is a counter of elapsed years that is always right.