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

Move injecting data from the server into the page into its own file

Browse Source
This commit is contained in:
Kristofer Selbekk
2018-10-07 20:07:28 +02:00
parent 2ddff8b468
commit 328ac7bedf
3 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docusaurus/docs/injecting-data-from-the-server-into-the-page.md Normal file
View File

@@ -0,0 +1,17 @@
---
id: injecting-data-from-the-server-into-the-page
title: 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:
```js
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
```
Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.**

16
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 ## Table of Contents
- [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) - [Making a Progressive Web App](#making-a-progressive-web-app)
- [Why Opt-in?](#why-opt-in) - [Why Opt-in?](#why-opt-in)
- [Offline-First Considerations](#offline-first-considerations) - [Offline-First Considerations](#offline-first-considerations)
@@ -19,21 +18,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Advanced Configuration](#advanced-configuration) - [Advanced Configuration](#advanced-configuration)
- [Alternatives to Ejecting](#alternatives-to-ejecting) - [Alternatives to Ejecting](#alternatives-to-ejecting)
## 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:
```js
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
```
Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.**
## Making a Progressive Web App ## Making a Progressive Web App
The production build has all the tools necessary to generate a first-class The production build has all the tools necessary to generate a first-class

7
docusaurus/website/sidebars.json
View File

@@ -33,11 +33,13 @@
"adding-relay", "adding-relay",
"adding-a-router", "adding-a-router",
"adding-custom-environment-variables", "adding-custom-environment-variables",
"can-i-use-decorators",
"fetching-data-with-ajax-requests", "fetching-data-with-ajax-requests",
"integrating-with-an-api-backend", "integrating-with-an-api-backend",
"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"
], ],
"Testing": ["running-tests", "debugging-tests"], "Testing": ["running-tests", "debugging-tests"],
"Deployment": ["publishing-components-to-npm", "deployment"], "Deployment": ["publishing-components-to-npm", "deployment"],
@@ -46,9 +48,6 @@
"updating-to-new-releases", "updating-to-new-releases",
"sending-feedback", "sending-feedback",
"something-missing" "something-missing"
],
"Frequently Asked Questions": [
"can-i-use-decorators"
] ]
} }
} }