Skip to content

Added a how-to on react-snapshot #1577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gaearon merged 8 commits into from
Feb 24, 2017
Merged

Added a how-to on react-snapshot #1577

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6c85820
Added a how-to on react-snapshot
superhighfives Feb 16, 2017
9139cab
Updated link title for react-snapshot overview
superhighfives Feb 16, 2017
829df2b
Explained pre-rendering in a more generic way
superhighfives Feb 24, 2017
51d1387
Added link to top level README.md, and removed specifics from overview
superhighfives Feb 24, 2017
edce66e
Updated html -> HTML
superhighfives Feb 24, 2017
bfce784
Updated quotes and apostrophes
superhighfives Feb 24, 2017
18b2a41
html -> HTML
gaearon Feb 24, 2017
2d8f7ad
Fix link
gaearon Feb 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
- [Using HTTPS in Development](#using-https-in-development)
- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
- [Pre-Generating `<meta>` Tags with `react-snapshot`](#pre-generating-meta-tags-with-react-snapshot)
Copy link
Copy Markdown
Contributor

@gaearon gaearon Feb 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe make this a more generic section? Like "Pre-Rendering into Static HTML Files"

Copy link
Copy Markdown
Contributor Author

@superhighfives superhighfives Feb 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, good call. Will update.

Copy link
Copy Markdown
Contributor

@gaearon gaearon Feb 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would also be great to explain it in a more generic way. Like, here are the cases where you'd use that. Meta tags is just one of those cases.

- [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
- [Running Tests](#running-tests)
- [Filename Conventions](#filename-conventions)
Expand Down Expand Up @@ -255,7 +256,7 @@ Note that normally you wouldn't edit files in the `public` folder very often. Fo

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.

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).
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-generating-meta-tags-with-react-snapshot).

## Installing a Dependency

Expand Down Expand Up @@ -813,6 +814,12 @@ Then, on the server, regardless of the backend you use, you can read `index.html

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.

## Pre-Generating `<meta>` Tags with `react-snapshot`

If you'd prefer to host your `build` with a static hosting provider, like [Surge](https://surge.sh), you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot), [react-router](https://reacttraining.com/react-router/) and [react-helmet](https://github.com/nfl/react-helmet) to generate html pages for each route in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded.

You can read more about [zero-configuration snapshotting (also called pre-rendering) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319).

## Injecting Data from the Server into the Page

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