Server-render your SPA in CI at deploy time 📸

If you deploy your SPA using GitHub Actions you can add this new action to your workflow to have it build server-rendered HTML!

Server-side rendering (SSR) is great for SEO and performance. I use it for projects that have an expensive initial render or have links that I want to be discoverable.

react-snap is a tool to help with SSR; a while ago I wrote about it:

Perform a React disappearing act with react-snap ✨🧙💨

Bryce Dorn ・ Jan 23 '20 ・ 3 min read

#javascript #react #webdev

I've been using it as a postbuild script but it recently broke in CI. The fix for it became rather complex, so rather than include this in each project that I use it for I decided to bundle everything into a standalone action. This also significantly reduced the number of per-project dependencies as it prevents installing big ones like puppeteer.

Though react is in the name, this will work for any framework that supports hydration. In Svelte for example, this just means switching the hydrate flag:

import App from './App.svelte';

const app = new App({
  target: document.querySelector('#server-rendered-html'),
  hydrate: true
});

Once your app is hydratable, replacing your build step with this action will run npm build followed by react-snap:

jobs:
  prerender:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      ...

      - name: Server-side render
        uses: brycedorn/react-snap-action@v1.0.2

You can then deploy this to GitHub Pages or wherever. Give it a try and let me know if it helps simplify your workflow!

brycedorn / react-snap-action

Github Action for pre-rendering via react-snap.