React SSR渲染

最新推荐文章于 2023-10-16 19:04:37 发布

拉勾小迷弟

最新推荐文章于 2023-10-16 19:04:37 发布

阅读量268

点赞数

文章标签： react.js javascript node.js

本文链接：https://blog.csdn.net/weixin_43016472/article/details/119888597

版权

什么是客户端渲染

CSR：Client Side Rendering
服务器端仅返回 JSON 数据, DATA 和 HTML 在客户端进行渲染
在这里插入图片描述

什么是服务器端渲染

SSR：Server Side Rendering
服务器端返回HTML, DATA 和 HTML 在服务器端进行渲染.
在这里插入图片描述

React SSR 同构

同构指的是代码复用. 即实现客户端和服务器端最大程度的代码复用

客户端渲染存在的问题
1. 首屏等待时间长, 用户体验差
2. 页面结构为空, 不利于 SEO

实现 SSR

项目结构
react-ssr
	src 源代码文件夹
		client 客户端代码
		server 服务器端代码
		share  同构代码

在这里插入图片描述

在服务端文件夹(server)中新建 http.js 创建 Node 服务器

// server/http.js
import express from 'express';

const app = express();

app.listen(3000, () => console.log('app is running on 3000 port'));

export default app;

1. 引入要渲染的React 组件
2. 通过renderToString 方法将React 组件转换为HTML 字符串
3. 将结果HTML字符串想到到客户端
renderToString 方法用于将React 组件转换为HTML 字符串, 通过react-dom/server 导入.

新建 index.js 和 renderer.js
renderer.js 文件导出一个方法，方法返回服务端要渲染的 html 模板
index.js 通过 send 方法把renderer响应给客户端

// server/index.js 
import app from './http';
import renderer from './renderer';

app.get('*', (req, res) => {
  res.send(renderer());
});

// server/renderer.js 
import React from "react";
import { renderToString } from "react-dom/server";

export default () => {
  const content = renderToString(
    <div>React SSR</div>
  );
  return `
  <html>
    <head>
      <title>React SSR</title>
    </head>
    <body>
      <div id="root">${content}</div>
    </body>
  </html>
`;
};

因为Node 环境不支持ESModule 模块系统, 不支持JSX 语法，所以需要通过webpack 对项目进行打包

//webpack.server.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');

const config = {
  mode: "development",
  target: 'node',
  entry: './src/server/index.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env","@babel/preset-react"]
          }
        }
      }
    ]
  }
}

配置打包命令
dev:server-build 打包文件，并监听文件，文件发生变化，重新打包
dev:server-run 监听 build 文件夹发生变化执行 node build/bundle.js

"scripts": {
	"dev:server-run": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:server-build": "webpack --config webpack.server.js --watch",
  }

React SSR 实现给元素添加事件