kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-03-29 00:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move pre-rendering static html files to its own file

Browse Source
This commit is contained in:
Kristofer Selbekk
2018-10-07 20:05:47 +02:00
parent 1f61e8d834
commit 2ddff8b468
3 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docusaurus/docs/pre-rendering-into-static-html-files.md Normal file
View File

@@ -0,0 +1,12 @@
---
id: pre-rendering-into-static-html-files
title: 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) or [react-snap](https://github.com/stereobooster/react-snap) 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 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).

11
docusaurus/docs/user-guide.md
View File

@@ -11,7 +11,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
## Table of Contents
- [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)
- [Making a Progressive Web App](#making-a-progressive-web-app)
- [Why Opt-in?](#why-opt-in)
@@ -20,16 +19,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Advanced Configuration](#advanced-configuration)
- [Alternatives to Ejecting](#alternatives-to-ejecting)
## 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) or [react-snap](https://github.com/stereobooster/react-snap) 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 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:

3
docusaurus/website/sidebars.json
View File

@@ -36,7 +36,8 @@
"fetching-data-with-ajax-requests",
"integrating-with-an-api-backend",
"using-https-in-development",
"generating-dynamic-meta-tags-on-the-server"
"generating-dynamic-meta-tags-on-the-server",
"pre-rendering-into-static-html-files"
],
"Testing": ["running-tests", "debugging-tests"],
"Deployment": ["publishing-components-to-npm", "deployment"],