create-react-app 服务器端渲染答案

【问题标题】：create-react-app Server Side Renderingcreate-react-app 服务器端渲染
【发布时间】：2018-01-30 11:27:52
【问题描述】：

我正在尝试使用我的 create-react-app 项目实现服务器端渲染。我现在真的不需要路由，因为它是一个单页应用程序。我一直在浏览一些文章，但它们对我来说似乎很复杂。有人可以指导我如何做到这一点，或者可以将我链接到一些更简单的文章吗？

这是到目前为止的代码：-

主应用组件，导入其他组件：-

import React, { Component } from "react";
import HomePage from "./HomePage";
import "./App.css";

class App extends Component {

  render() {
    return(
      <div>
        <HomePage/>
      </div>
    );
  }
}

export default App;

到目前为止的 Express 代码：-

import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "../src/App";

const app = express();

app.use(express.static("../public"));

app.get('*', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <head>
            <title>Universal React</title>
        </head>
        <body>
            <div id="root">${renderToString(<App/>)}</div>
        </body>
        </html>
    `);
});

app.listen(3000, () => {
    console.log('Server running on PORT 3000');
})

到目前为止，我查看的所有文章或视频都使用 webpack 并对 webpack.config.js 文件进行更改，但我使用的是包含 webpack 的 Create-react-app，没有配置文件，所以我是对如何进行所需的更改有点困惑？

【问题讨论】：

标签： reactjs express server-side-rendering

【解决方案1】：

你必须 eject 项目/脚本/webpack 配置

这里有一个example article，关于如何使用 react-router/redux 实现服务器端渲染

【讨论】：

【解决方案2】：

将react-scripts 替换为react-app-tools
更新 package.json 中的 NPM 脚本以调用 react-app build、react-app start
将src/index.js重命名为src/app.browser.js，为服务器增加一个入口点src/app.node.js

目录布局

.
├── /build/                     # Compiled output
│   ├── /public/                # Pre-compiled client-side app
│   └── server.js               # Pre-compiled Node.js app
├── /src/                       # Application source files
│   ├── /components/            # React.js components
│   │   ├── /App/               #   - The top-level React component
│   │   ├── /Button/            #   - Some other UI element
│   │   └── ...                 #   - etc.
│   ├── app.browser.js          # Client-side rendering, e.g. ReactDOM.render(<App />, container)
│   ├── app.node.js             # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
│   └── server.js               # Server-side entiry point, e.g. app.listen(process.env.PORT)
└── package.json                # List of project dependencies and NPM scripts

`src/app.browser.js`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

`src/app.node.js`

import path from 'path';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
  res.send(ReactDOMServer.renderToString(<App />));
});

export default app;

`package.json`

{
  "dependencies": {
    "express": "^4.6.12",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  {
    "react-app-tools": "^2.0.0-beta.5"
  },
  "scripts": {
    "test": "react-app test --env=jsdom",
    "build": "react-app build",
    "start": "react-app start"
  }
}

更多信息：https://github.com/kriasoft/react-app

【讨论】：