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!