-
-
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
Merged
+14
−2
Merged
Changes from 4 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 9139cab
Updated link title for react-snapshot overview
superhighfives 829df2b
Explained pre-rendering in a more generic way
superhighfives 51d1387
Added link to top level README.md, and removed specifics from overview
superhighfives edce66e
Updated html -> HTML
superhighfives bfce784
Updated quotes and apostrophes
superhighfives 18b2a41
html -> HTML
gaearon 2d8f7ad
Fix link
gaearon File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 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. | ||
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. html -> HTML ’ 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. Fixed! Did you want me to swap the: ’ bits? |
||
|
||
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: | ||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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