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 o…


This content originally appeared on DEV Community and was authored by Bryce Dorn

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:

bryce

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!

GitHub logo brycedorn / react-snap-action

Github Action for pre-rendering via react-snap.


This content originally appeared on DEV Community and was authored by Bryce Dorn


Print Share Comment Cite Upload Translate Updates
APA

Bryce Dorn | Sciencx (2023-03-02T10:47:36+00:00) Server-render your SPA in CI at deploy time 📸. Retrieved from https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/

MLA
" » Server-render your SPA in CI at deploy time 📸." Bryce Dorn | Sciencx - Thursday March 2, 2023, https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/
HARVARD
Bryce Dorn | Sciencx Thursday March 2, 2023 » Server-render your SPA in CI at deploy time 📸., viewed ,<https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/>
VANCOUVER
Bryce Dorn | Sciencx - » Server-render your SPA in CI at deploy time 📸. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/
CHICAGO
" » Server-render your SPA in CI at deploy time 📸." Bryce Dorn | Sciencx - Accessed . https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/
IEEE
" » Server-render your SPA in CI at deploy time 📸." Bryce Dorn | Sciencx [Online]. Available: https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/. [Accessed: ]
rf:citation
» Server-render your SPA in CI at deploy time 📸 | Bryce Dorn | Sciencx | https://www.scien.cx/2023/03/02/server-render-your-spa-in-ci-at-deploy-time-%f0%9f%93%b8/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts