https://github.com/brycedorn/react-snap-action
Github Action for pre-rendering via react-snap.
https://github.com/brycedorn/react-snap-action
chrome deployment headless-chrome prerender puppeteer react-snap server-side-rendering ssr
Last synced: 3 months ago
JSON representation
Github Action for pre-rendering via react-snap.
- Host: GitHub
- URL: https://github.com/brycedorn/react-snap-action
- Owner: brycedorn
- Created: 2023-02-26T19:05:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-26T20:44:43.000Z (about 2 years ago)
- Last Synced: 2025-02-02T12:04:40.352Z (4 months ago)
- Topics: chrome, deployment, headless-chrome, prerender, puppeteer, react-snap, server-side-rendering, ssr
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-snap action
[](https://github.com/brycedorn/react-snap-action/actions/workflows/test.yml)
This action uses [react-snap](https://github.com/stereobooster/react-snap) to pre-render a web application into static, hydratable HTML.
If your node-based web application has a `build` script that outputs HTML, this action will render it and update the `index.html` within output directory with the result. This can then easily be deployed to GitHub pages, etc and you'll have some of the benefits of server-side rendering (SSR) without needing a server!
While you can include [react-snap](https://github.com/stereobooster/react-snap) as a dependency to directly your project, [puppeteer](https://github.com/puppeteer/puppeteer/tree/main) is heavy and headless Chrome is overkill for a simple web app. This also simplifies the configuration required to enable them to run in CI.
## Usage
```yml
jobs:
prerender:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Server-side render
uses: brycedorn/[email protected]
```
For input options see [action.yml](https://github.com/brycedorn/react-snap-action/blob/main/action.yml).
## Why use this?
- Enables SEO for SPAs. Web crawlers only care about `` tags in HTML markup, not those rendered client-side.
- Better performance. As the server frontloads the expensive initial render once, clients only need to [hydrate](https://beta.reactjs.org/reference/react-dom/hydrate) to render the app.