react-snap

react-snap一个零配置的静态 SPA 单页应用预渲染框架。

react-snap安装

yarn add --dev react-snap

package.json：

"scripts": {
  "postbuild": "react-snap"
}

src/index.js：

import { hydrate, render } from "react-dom";

c***t rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}

react-snap   

Pre-renders web app into static HTML. Uses headless chrome to pre-render. 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.

Does not depend on React . The name is inspired by react-snapshotand because the initial goal was to enable seamless integration with create-react-app. Actually, it works with any technology. C***idering to change the name.

Features

• Enables SEO (google, duckduckgo...) and SMO (twitter, facebook...) for SPA.
• Works out-of-the-box with create-react-app - no code-changes required.
• Uses real browser behind the scene, so no issue with unsupported HTML5 features, like WebGL or Blobs.
• Crawls all pages starting from the root, no need to list pages by hand, like in prep.
• With prerendered HTML and inlined critical CSS you will get fast first paint, like with critical .
• With Preload resourcesfeature you will get faster first interaction time if your page does do AJAX requests.
• Works with webpack 2 code splitting feature
• Handles sourcemaps

Please note: some features are experimental, but basic prerendering is c***idered stable enough. API is subject to change before freeze in version 1.0.

Basic usage with create-react-app

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 ' ; c***t rootElement = document . getElementById ( ' root ' );  if ( rootElement . hasChildNodes ()) {  hydrate ( < App / > , rootElement);  } else { render ( < App / > , rootElement);  }      

That's it!