react-snap-test
v1.23.13
Published
Zero-configuration framework-agnostic static prerendering for SPAs
Downloads
33
Maintainers
Readme
react-snap-test
⚠️ This is a lazy fork of react-snap. It is just a version with updated dependencies. Will try to keep dependencies updated, but no development in the near future.
NOTE: might not work as expected because of dependency updates but tests seem to run smoothly. Create an issue on my repo if you have a specific case that is now not supported because of dependency updates.
⚠️ This project uses yarn for build and tests. To install it :
npm install --global yarn
. Thenyarn test
to run tests.
react-snap-test
Pre-renders a web app into static HTML. Uses Headless Chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get the best loading performance.
😍 Features
- Enables SEO (Google, DuckDuckGo...) and SMO (Twitter, Facebook...) for SPAs.
- Works out-of-the-box with create-react-app - no code-changes required.
- Uses a real browser behind the scenes, so there are no issues with unsupported HTML5 features, like WebGL or Blobs.
- Does a lot of load performance optimization. Here are details, if you are curious.
- Does not depend on React. The name is inspired by
react-snapshot
but works with any technology (e.g., Vue). - npm package does not have a compilation step, so you can fork it, change what you need, and install it with a GitHub URL.
Zero configuration is the main feature. You do not need to worry about how it works or how to configure it. But if you are curious, here are details.
Basic usage with create-react-app
Install:
yarn add --dev react-snap-test
Change package.json
:
"scripts": {
"postbuild": "react-snap"
}
Change src/index.js
(for React 16+):
import { hydrate, render } from "react-dom";
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(<App />, rootElement);
} else {
render(<App />, rootElement);
}
That's it!
🆕 React 18
Fix #162 [BUG]: hydrateRoot(...): Target container is not a DOM element. Particular attention to the parameters inversion in the NEW hydrate function:
hydrate(<App tab="home" />, container)
vshydrateRoot(container, <App tab="home" />)
.Extract from How to Upgrade to React 18:
Finally, if your app uses server-side rendering with hydration, upgrade
hydrate
tohydrateRoot
:// Before import { hydrate } from 'react-dom'; const container = document.getElementById('app'); hydrate(<App tab="home" />, container); // After import { hydrateRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = hydrateRoot(container, <App tab="home" />); // Unlike with createRoot, you don't need a separate root.render() call here.
Basic usage with Preact
To do hydration in Preact you need to use this trick:
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
preact.render(<App />, rootElement, rootElement.firstElementChild);
} else {
preact.render(<App />, rootElement);
}
Basic usage with Vue.js
Install:
yarn add --dev react-snap-test
Change package.json
:
"scripts": {
"postbuild": "react-snap"
},
"reactSnap": {
"source": "dist",
"minifyHtml": {
"collapseWhitespace": false,
"removeComments": false
}
}
Or use preserveWhitespace: false
in vue-loader
.
source
- output folder of webpack or any other bundler of your choice
Read more about minifyHtml
caveats in #142.
Example: Switch from prerender-spa-plugin to react-snap
Caveats
Only works with routing strategies using the HTML5 history API. No hash(bang) URLs.
Vue uses the data-server-rendered
attribute on the root element to mark SSR generated markup. When this attribute is present, the VDOM rehydrates instead of rendering everything from scratch, which can result in a flash.
This is a small hack to fix rehydration problem:
window.snapSaveState = () => {
document.querySelector("#app").setAttribute("data-server-rendered", "true");
};
window.snapSaveState
is a callback to save the state of the application at the end of rendering. It can be used for Redux or async components. In this example, it is repurposed to alter the DOM, this is why I call it a "hack." Maybe in future versions of react-snap
, I will come up with better abstractions or automate this process.
Vue 1.x
Make sure to use replace: false
for root components
✨ Examples
- Emotion website load performance optimization
- Load performance optimization
- recipes
- stereobooster/an-almost-static-stack
⚙️ Customization
If you need to pass some options for react-snap
, you can do this in your package.json
like this:
"reactSnap": {
"inlineCss": true
}
Not all options are documented yet, but you can check defaultOptions
in index.js
.
inlineCss
Experimental feature - requires improvements.
react-snap
can inline critical CSS with the help of minimalcss and full CSS will be loaded in a non-blocking manner with the help of loadCss.
Use inlineCss: true
to enable this feature.
TODO: as soon as this feature is stable, it should be enabled by default.
⚠️ Caveats
Async components
Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments". See: Guide To JavaScript Async Components
An async component (in React) is a technique (typically implemented as a higher-order component) for loading components on demand with the dynamic import
operator. There are a lot of solutions in this field. Here are some examples:
It is not a problem to render async components with react-snap
, the tricky part happens when a prerendered React application boots and async components are not loaded yet, so React draws the "loading" state of a component, and later when the component is loaded, React draws the actual component. As a result, the user sees a flash:
100% /----| |----
/ | |
/ | |
/ | |
/ |____|
visual progress /
/
0% -------------/
Usually a code splitting library provides an API to handle it during SSR, but as long as "real" SSR is not used in react-snap - the issue surfaces, and there is no simple way to fix it.
- Use react-prerendered-component. This library holds onto the prerendered HTML until the dynamically imported code is ready.
import loadable from "@loadable/component";
import { PrerenderedComponent } from "react-prerendered-component";
const prerenderedLoadable = dynamicImport => {
const LoadableComponent = loadable(dynamicImport);
return React.memo(props => (
// you can use the `.preload()` method from react-loadable or react-imported-component`
<PrerenderedComponent live={LoadableComponent.load()}>
<LoadableComponent {...props} />
</PrerenderedComponent>
));
};
const MyComponent = prerenderedLoadable(() => import("./MyComponent"));
MyComponent
will use prerendered HTML to prevent the page content from flashing (it will find the required piece of HTML using an id
attribute generated by PrerenderedComponent
and inject it using dangerouslySetInnerHTML
).
- The same approach will work with
React.lazy
, butReact.lazy
doesn't provide a prefetch method (load
orpreload
), so you need to implement it yourself (this can be a fragile solution).
const prefetchMap = new WeakMap();
const prefetchLazy = LazyComponent => {
if (!prefetchMap.has(LazyComponent)) {
prefetchMap.set(LazyComponent, LazyComponent._ctor());
}
return prefetchMap.get(LazyComponent);
};
const prerenderedLazy = dynamicImport => {
const LazyComponent = React.lazy(dynamicImport);
return React.memo(props => (
<PrerenderedComponent live={prefetchLazy(LazyComponent)}>
<LazyComponent {...props} />
</PrerenderedComponent>
));
};
const MyComponent = prerenderedLazy(() => import("./MyComponent"));
- use
loadable-components
2.2.3 (current is >5). The old version ofloadable-components
can solve this issue for a "snapshot" setup:
import { loadComponents, getState } from "loadable-components";
window.snapSaveState = () => getState();
loadComponents()
.then(() => hydrate(AppWithRouter, rootElement))
.catch(() => render(AppWithRouter, rootElement));
If you don't use babel plugin, don't forget to provide modules:
const NotFoundPage = loadable(() => import("src/pages/NotFoundPage"), {
modules: ["NotFoundPage"]
});
loadable-components
were deprecated in favour of@loadable/component
, but@loadable/component
droppedgetState
. So if you want to useloadable-components
you can use old version (2.2.3
latest version at the moment of writing) or you can wait untilReact
will implement proper handling of this case with asynchronous rendering andReact.lazy
.
Redux
See: Redux Server Rendering Section
// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__PRELOADED_STATE__;
// Allow the passed state to be garbage-collected
delete window.__PRELOADED_STATE__;
// Create Redux store with initial state
const store = createStore(counterApp, preloadedState || initialState);
// Tell react-snap how to save Redux state
window.snapSaveState = () => ({
__PRELOADED_STATE__: store.getState()
});
Caution: as of now, only basic "JSON" data types are supported: e.g. Date
, Set
, Map
, and NaN
won't be handled correctly (#54).
Third-party requests: Google Analytics, Mapbox, etc.
You can block all third-party requests with the following config:
"skipThirdPartyRequests": true
AJAX
react-snap
can capture all AJAX requests. It will store json
requests in the domain in window.snapStore[<path>]
, where <path>
is the path of the request.
Use "cacheAjaxRequests": true
to enable this feature.
This feature can conflict with the browser cache. See #197 for details. You may want to disable cache in this case: "puppeteer": { "cache": false }
.
Service Workers
By default, create-react-app
uses index.html
as a fallback:
navigateFallback: publicUrl + '/index.html',
You need to change this to an un-prerendered version of index.html
- 200.html
, otherwise you will see index.html
flash on other pages (if you have any). See Configure sw-precache without ejecting for more information.
Containers and other restricted environments
Puppeteer (Headless Chrome) may fail due to sandboxing issues. To get around this, you may use:
"puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]
Read more about puppeteer troubleshooting.
"inlineCss": true
sometimes causes problems in containers.
Docker + Alpine
To run react-snap
inside docker
with Alpine, you might want to use a custom Chromium executable. See #93 and #132.
Heroku
heroku buildpacks:add https://github.com/jontewks/puppeteer-heroku-buildpack.git
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git
See this PR. At the moment of writing, Heroku doesn't support HTTP/2.
Semantic UI
Semantic UI is defined over class substrings that contain spaces (e.g., "three column"). Sorting the class names, therefore, breaks the styling. To get around this, use the following configuration:
"minifyHtml": { "sortClassName": false }
From version 1.17.0
, sortClassName
is false
by default.
JSS
Once JS on the client is loaded, components initialized and your JSS styles are regenerated, it's a good time to remove server-side generated style tag in order to avoid side-effects
https://github.com/cssinjs/jss/blob/master/docs/ssr.md
This basically means that JSS doesn't support rehydration
. See #99 for a possible solutions.
react-router
v3
See #135.
userAgent
You can use navigator.userAgent == "ReactSnap"
to do some checks in the app code while snapping—for example, if you use an absolute path for your API AJAX request. While crawling, however, you should request a specific host.
Example code:
const BASE_URL =
process.env.NODE_ENV == "production" && navigator.userAgent != "ReactSnap"
? "/"
: "http://xxx.yy/rest-api";
Alternatives
See alternatives.
Who uses it
| | | | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
Contributing
Report a bug
Please provide a reproducible demo of a bug and steps to reproduce it. Thanks!
Share on the web
Tweet it, like it, share it, star it. Thank you.
Code
You can also contribute to minimalcss, which is a big part of react-snap
. Also, give it some stars.