SSG in my SPA? It's more likely than you think.

Introduction (or how I got myself into this situation)

There's an old saying that goes something like this: "If your only tool is React, then every problem looks like a nail." It's not fair to say that's my only tool, as I'm proficient with several client and server-side frontend frameworks, but React is certainly the one I've felt the most comfortable with. My penchant for React SPAs is a double-edge sword though, with its main feature being a major drawback: Client-Side Rendering (CSR). With the HTML being generated in Javascript as the browser loads the page, it means that the initial page load only contains the empty shell of a webpage, with functionally no content. This presents several major issues, including:

• Pages are initially blank on slow connections
• Search engines can't see any content to generate previews
• Page titles, descriptions and thumbnails won't be shown when sharing links in messaging apps One solution is to migrate & rewrite the site in a framework that supports Server-Side Rendering (SSR). For a small site, like this one, that's probably one of the better options. But migrations and rewrites aren't always possible, which leads us searching for other options. Enter Server-Side Generation (SSG).

Server-Side Generation

SSG, also known as Prerendering, is the process of running the client code for your site ahead of time and saving a copy of the generated HTML. Once you have static HTML, you serve it directly as your site and, optionally, rehydrate it with your client code to make it behave with all the interactivity you built it for. ...

A nested resource pattern & when to use it

Prelude

We've all been there, you're building a website with your favourite JS framework and want to add an icon button. No worries, just drop an img tag in your button, right? (not the best example, but stay with me)

button.jsx

<button>
  <img src="/icon.svg" />
</button>

Now let's just change the colour on focus... Oh—how the heck do I do that?

What's the problem?

Our icon is an SVG and its colour is set inside the file. To make it match the CSS font colour, we'll need to update the fill and/or stroke to use a special keyword: currentColor.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100"
>
  <circle r="50" cx="50" cy="50" fill="currentColor" />
</svg>

...