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

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

我们已经使用 Transmit.createContainer 将我们的组件包装在一个高级组件中，该组件可以用来获取数据。我们在 React 组件中删除了生命周期方法，因为无需两次获取数据。同时我们把 render 方法中的 state 替换成 props，因为 React Transmit 将数据作为 props 传递给组件。

为了确保服务器在渲染之前获取数据，我们导入 Transmit 并使用 Transmit.renderToString 而不是 ReactDOM.renderToString 方法

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';
import Transmit from 'react-transmit';

function handleRender(req, res) {
 Transmit.renderToString(Hello).then(({reactString, reactData}) => {
  fs.readFile('./index.html', 'utf8', function (err, data) {
   if (err) throw err;

   const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${reactString}</div>`);
   const output = Transmit.injectIntoMarkup(document, reactData, ['/build/client.js']);

   res.send(document);
  });
 });
}

const app = express();

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

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

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

重新启动服务器浏览到 http://localhost：3000。查看页面源代码，您将看到该页面现在完全呈现在服务器上！

更进一步

我们做到了！在服务器上使用 React 可能很棘手，尤其是从 API 获取数据时。幸运的是，React社区正在蓬勃发展，并创造了许多有用的工具。如果您对构建在客户端和服务器上渲染的大型 React 应用程序的框架感兴趣，请查看 Walmart Labs 的 Electrode 或Next.js。或者如果要在 Ruby 中渲染 React ，请查看 AirBnB 的 Hypernova 。

 原文地址：https://css-tricks.com/server-side-react-rendering/

 原文作者：Roger Jin

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。