React SSR 项目教程

2024-09-01 19:36:05作者：毕习沙Eudora

1. 项目的目录结构及介绍

template-react-ssr/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── client/
│   │   ├── index.js
│   │   └── App.js
│   ├── server/
│   │   ├── index.js
│   │   └── render.js
│   ├── components/
│   │   ├── Header.js
│   │   └── Footer.js
│   ├── store/
│   │   ├── index.js
│   │   └── reducers.js
│   └── index.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

public/: 存放静态文件，如 index.html 和 favicon.ico。
src/: 项目的主要源代码目录。
- client/: 客户端代码，包括入口文件 index.js 和主应用组件 App.js。
- server/: 服务器端代码，包括服务器入口文件 index.js 和渲染逻辑 render.js。
- components/: 存放通用组件，如 Header.js 和 Footer.js。
- store/: Redux 相关文件，包括 store 配置和 reducers。
- index.js: 项目的主入口文件。
.babelrc: Babel 配置文件。
.eslintrc: ESLint 配置文件。
.gitignore: Git 忽略文件配置。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

客户端启动文件

src/client/index.js

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

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

服务器端启动文件

src/server/index.js

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from '../client/App';

const app = express();

app.use(express.static('public'));

app.get('*', (req, res) => {
  const content = renderToString(<App />);
  res.send(`
    <html>
      <head>
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${content}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

3. 项目的配置文件介绍

Babel 配置文件

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

ESLint 配置文件

.eslintrc

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "rules": {
    "no-console": "off"
  }
}

Webpack 配置文件

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/client/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }