create-react-app服务器端渲染 [英] create-react-app Server Side Rendering
问题描述
我正在尝试通过我的create-react-app项目实现服务器端渲染.我现在真的不需要路由，因为它是一个单页应用程序.我一直在浏览一些文章，但是对我来说它们似乎很复杂.有人可以指导我如何做吗，或者可以将我链接到一些更简单的文章?
I am trying to achieve Server side rendering with my create-react-app project. I don't really need routes for now because it's a single-page application. I have been going through some articles but they seem to be quite complicated to me. Could someone guide me about how to do it or could link me to some simpler articles please?
这是到目前为止的代码:-
Here is the code till now:-
主要的应用程序组件，它导入其他组件:-
The main app component, which imports other components:-
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代码:-
The Express code till now:-
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，没有配置文件，所以我是对如何进行所需的更改有些困惑?
All the articles or videos I have checked out till now use webpack and make changes to webpack.config.js file but I am using Create-react-app which comes with webpack included, there is no config file so I am a bit confused about how to make the required changes?
推荐答案
- 用
react-app-tools替换 - 更新
package.json中的NPM脚本以调用react-app build，react-app start - 将
src/index.js重命名为src/app.browser.js，为服务器src/app.node.js添加一个入口点
react-scripts - Replace
react-scriptswithreact-app-tools - Update NPM scripts in
package.jsonto callreact-app build,react-app start - Rename
src/index.jstosrc/app.browser.js, add one more entry point for the serversrc/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
这篇关于create-react-app服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
