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

Move generating dynamic meta tags on the server to its own file

Browse Source
This commit is contained in:
Kristofer Selbekk
2018-10-07 20:04:32 +02:00
parent 5c44972a4c
commit 1f61e8d834
3 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docusaurus/docs/generating-dynamic-meta-tags-on-the-server.md Normal file
View File

@@ -0,0 +1,18 @@
---
id: generating-dynamic-meta-tags-on-the-server
title: Generating Dynamic `<meta>` Tags on the Server
---
Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:
```html
<!doctype html>
<html lang="en">
<head>
<meta property="og:title" content="__OG_TITLE__">
<meta property="og:description" content="__OG_DESCRIPTION__">
```
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into 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.

17
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
- [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)
- [Making a Progressive Web App](#making-a-progressive-web-app)
@@ -21,22 +20,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)
## Generating Dynamic `<meta>` Tags on the Server
Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:
```html
<!doctype html>
<html lang="en">
<head>
<meta property="og:title" content="__OG_TITLE__">
<meta property="og:description" content="__OG_DESCRIPTION__">
```
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into 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) 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.

3
docusaurus/website/sidebars.json
View File

@@ -35,7 +35,8 @@
"adding-custom-environment-variables",
"fetching-data-with-ajax-requests",
"integrating-with-an-api-backend",
"using-https-in-development"
"using-https-in-development",
"generating-dynamic-meta-tags-on-the-server"
],
"Testing": ["running-tests", "debugging-tests"],
"Deployment": ["publishing-components-to-npm", "deployment"],