详解React 在服务端渲染的实现(2)

日期：2020-05-11 栏目：程序人生浏览：次

启动器代码中包含以下内容：

package.json - 依赖项
Webpack 和 Babel 配置
index.html - app 的 HTML 文件
index.js - 加载 React 并渲染 Hello 组件

要使应用运行，请先克隆资源库：

git clone ...
cd ..

安装依赖:

npm install

然后启动服务器:

npm run start

浏览器输入 http://localhost:8000 可以看到这个 app: (这里译者进行补充，package.json 里的 start 命令改为如下："start": webpack-dev-server --watch)

如果您查看渲染页面的源代码，您将看到发送到浏览器的标记只是一个到 JavaScript 文件的链接。这意味着页面的内容不能保证被搜索引擎和社交媒体平台抓取:

增加服务器端渲染

接下来，我们将实现服务器端渲染，以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改，请查看GitHub上的差异。

To get started, we'll install Express, a Node.js server side application framework:

开始前，让我们安装 Express，一个 Node.js 的服务器端应用程序框架：

npm install express --save

我们要创建一个渲染我们的 React 组件的服务器：

import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Hello from './Hello.js';

function handleRender(req, res) {
 // 把 Hello 组件渲染成 HTML 字符串
 const html = ReactDOMServer.renderToString(<Hello />);

 // 加载 index.html 的内容
 fs.readFile('./index.html', 'utf8', function (err, data) {
  if (err) throw err;

  // 把渲染后的 React HTML 插入到 div 中
  const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${html}</div>`);

  // 把响应传回给客户端
  res.send(document);
 });
}

const app = express();

// 服务器使用 static 中间件构建 build 路径
app.use('/build', express.static(path.join(__dirname, 'build')));

// 使用我们的 handleRender 中间件处理服务端请求
app.get('*', handleRender);

// 启动服务器
app.listen(3000);

让我们分解下程序看看发生了什么事情...

handleRender 函数处理所有请求。在文件顶部导入的ReactDOMServer 类提供了将 React 节点渲染成其初始 HTML 的 renderToString() 方法

ReactDOMServer.renderToString(<Hello />);

转载注明出处：http://www.heiqu.com/1130.html

详解React 在服务端渲染的实现(2)

相关推荐