DEV Community

Cover image for Server-render your SPA in CI at deploy time 📸
Bryce Dorn
Bryce Dorn

Posted on

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:

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
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo brycedorn / react-snap-action

Github Action for pre-rendering via react-snap.

Top comments (0)