Skip to content

Commit c8d9c47

Browse files
superhighfivesgaearon
authored andcommitted
Added a how-to on react-snapshot (facebook#1577)
* Added a how-to on react-snapshot Added a section with a short description and link to a tutorial on generating static html pages with react-snapshot, and also linked to it from the section on managing the page title. * Updated link title for react-snapshot overview * Explained pre-rendering in a more generic way * Added link to top level README.md, and removed specifics from overview * Updated html -> HTML * Updated quotes and apostrophes * html -> HTML * Fix link
1 parent dd801e2 commit c8d9c47

File tree

2 files changed

+13
-1
lines changed

2 files changed

+13
-1
lines changed

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
125125
- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development)
126126
- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development)
127127
- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server)
128+
- [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files)
128129
- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
129130
- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation)
130131
- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)

packages/react-scripts/template/README.md

+12-1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
4343
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
4444
- [Using HTTPS in Development](#using-https-in-development)
4545
- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
46+
- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
4647
- [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
4748
- [Running Tests](#running-tests)
4849
- [Filename Conventions](#filename-conventions)
@@ -286,7 +287,7 @@ Note that normally you wouldn't edit files in the `public` folder very often. Fo
286287

287288
If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library.
288289

289-
Finally, if you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server).
290+
If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-rendering-into-static-html-files).
290291

291292
## Installing a Dependency
292293

@@ -861,6 +862,16 @@ Then, on the server, regardless of the backend you use, you can read `index.html
861862

862863
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
863864

865+
## Pre-Rendering into Static HTML Files
866+
867+
If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.
868+
869+
There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes.
870+
871+
The primary benefit of pre-rendering is that you get the core content of each page _with_ the HTML payload—regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines.
872+
873+
You can read more about [zero-configuration pre-rendering (also called snapshotting) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319).
874+
864875
## Injecting Data from the Server into the Page
865876

866877
Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example:

0 commit comments

Comments
 (0)