create-react-app服务器端渲染

本文介绍了create-react-app服务器端渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试通过我的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?

目录布局

.
├── /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服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

app服务器端渲染

问题描述

推荐答案

目录布局

src/app.browser.js

src/app.node.js

package.json

`src/app.browser.js`

`src/app.node.js`

`package.json`