react-snap-nosand

react-snap

Pre-renders web app into static HTML. Uses headless chrome to prerender. Crawls all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance.

Features

• Enables SEO (google, duckduckgo...) and SMO (twitter, facebook...) for SPA. Use React Helmet to generate meta tags.
• Works out-of-the-box with create-react-app - no code-changes required. Also, can work with another setup.
• Thanks to prerendered HTML and inlined critical CSS you will get very fast first paint.
• Thanks to Preload resources feature you will get very fast first interaction time.

Basic usage with create-react-app

Example project badsyntax/react-snap-example.

Install:

yarn add --dev react-snap

Change package.json:

"scripts": {
  "build": "react-scripts build && 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!

Inline css

ReactSnap can inline critical CSS with the help of minimalcss and full CSS will be loaded in a nonblocking manner with the help of loadCss.

Use inlineCss: true to enable this feature.

Caveat: as of now <noscript> fallback not implemented. As soon it will be implemented, this feature will be enabled by default.

Preload resources

ReactSnap can capture all required resources on the page and modify HTML, to instruct browser to preload those resources.

• It will use <link rel="preload" as="image"> for images.
• it will store json request to the same domain in window.snapStore[<path>], where <path> is the path of json request

Use preloadResources: true to enable this feature.

Recieps

See recipes for more examples.

TODO

• Add blog post with case study
• Use npm package for loadCss instead of vendoring it.
• Implement noscript fallback for loadCss trick
• Improve preconnect, dns-prefetch functionality
• Tests
• Add typechecking, like puppeteer did
• Evaluate penthouse as alternative to minimalcss
• Bug: gracefull shutdown doesn't work
• Check deployments to now
• Check deployments to surge

Ideas

• Generate AWS S3 redirects from React Router Redirects.