-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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.
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
Added a how-to on react-snapshot #1577
Changes from 3 commits
6c85820
9139cab
829df2b
51d1387
edce66e
bfce784
18b2a41
2d8f7ad
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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-Rendering into Static HTML Files](#pre-rendering-into-static-html-files) | ||
- [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page) | ||
- [Running Tests](#running-tests) | ||
- [Filename Conventions](#filename-conventions) | ||
|
@@ -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 | ||
|
||
|
@@ -402,7 +403,7 @@ Then in `package.json`, add the following lines to `scripts`: | |
"test": "react-scripts test --env=jsdom", | ||
``` | ||
|
||
>Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. | ||
>Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. | ||
|
||
Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. | ||
|
||
|
@@ -813,6 +814,16 @@ 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-Rendering into Static HTML Files | ||
|
||
If you're hosting 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, or relative link, in your application. These pages will then seamlessly become active, or "hydrated", when the JavaScript bundle has loaded. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We probably shouldn't single out Surge here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we really need to call out React Router and React Helmet here? Seems like pre-rendering is agnostic of the exact libs you use. Your medium post already has these details so we might as well skip them. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. True. Will update. And agreed—basically any static hosting service that supports 200.html will work out of the box. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wasn't going to bother you about removing spaces around em dash in the text, but you just asked for it. 😄 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hahahah! 👍 I deserve it. |
||
|
||
There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. | ||
|
||
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. | ||
|
||
You can read more about [zero-configuration pre-rendering (also called snapshotting) 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: | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should also add it to the main README since it's top level section