search

cloudflare / cloudflare-docs-engine

A documentation engine built on Gatsby, powering Cloudflare’s docs https://github.com/cloudflare/cloudflare-docs
https://developers.cloudflare.com/docs-engine
Apache License 2.0
219 stars 90 forks source link

TimeAgo + SSR somewhat problematic #288

Open adamschwartz opened 3 years ago

adamschwartz commented 3 years ago

Our use of <TimeAgo/> is slightly wonky with SSR:

https://github.com/cloudflare/cloudflare-docs-engine/blob/6faa9d1291d1d4980e6b533a7d4212aa60d96f4a/src/components/docs-tutorials.js#L89-L93

It can flash "N hours ago" and then switch to "3 days ago" on page load for example. This is because the SSR time will be locked in at the last time it was built, but upon hydration it will be from now.

We could potentially use HTMLRewriter to set on the fly.

kristianfreeman commented 3 years ago

@adamschwartz and i synced up on this in chat, we're leaning towards:

  1. hiding this element via a CSS data attribute
  2. refreshing the text content via an initial render
  3. removing the data attribute once the initial render has completed

in the situation where the user isn't running javascript, we can use noscript to just show the SSR time:

<style>[data-hide-ssr] { display: none }</style>
<noscript><style>[data-hide-ssr] { display: unset }</style></noscript>
adamschwartz commented 3 years ago

Also re noscript, maybe the SSR time should then just be more like 10/13/2020 (as opposed to 2 months ago)?