React之SSR

若梦plus

于 2024-08-29 19:21:07 发布

阅读量380

点赞数 10

分类专栏： React.js 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40588441/article/details/141686446

版权

React.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

React之ssr

渲染模式

服务器渲染

页面上的内容是由服务器生产的

npm install express --save

render\client.js

let express = require('express');
let app = express();
app.get('/', (req, res) => {
  res.send(`
        <html>
          <body>
            <div id="root">hello</div>
          </body>
        </html>
    `);
});
app.listen(8080);

客户端渲染

页面上的内容由于浏览器运行JS脚本而渲染到页面上的
- 浏览器访问服务器
- 服务器返回一个空的HTML页面，里面有一个JS资源链接，比如client
- 浏览器下载JS代码并在浏览器中运行
- 内容呈现在页面上

let express = require('express');
let app = express();
app.get('/', (req, res) => {
  res.send(`
        <html>
          <body>
            <div id="root"></div>
            <script>root.innerHTML = 'hello'</script>
          </body>
        </html>
    `);
});
app.listen(8090);

什么是同构

客户端渲染缺点
- 首屏速度加载慢
- 不支持SEO和搜索引擎优化
- 首页需要通过请求初始化数据
同构渲染
- 同构的项目支持客户端渲染和服务器端渲染
- 第一次访问页面是SSR，后面的访问是SPA，而且支持SEO
- 客户端和服务器端同构可以实现(尽可能复用代码)

客户端渲染(CSR)

安装

npm install react react-dom --save
npm install webpack webpack-cli babel-loader  @babel/preset-react --save-dev
npm install express cross-env nodemon @babel/register @babel/plugin-transform-modules-commonjs --save-dev

src\index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const root = document.getElementById('root');
createRoot(root).render(<App />);

App.js

src\App.js

import React from 'react';
import Header from './Header';
import User from './User';
import Footer from './Footer';
function App() {
  return (
    <>
      <Header />
      <User />
      <Footer />
    </>
  );
}
export default App

Header.js

src\Header.js

import React from 'react';
function Header() {
  return (
    <div onClick={() => alert('Header')}>Header</div>
  );
}
export default Header;

User.js

src\User.js

import React from 'react';
function User() {
  return (
    <div>User</div>
  );
}
export default User;

Footer.js

src\Footer.js

import React from 'react';
function Footer() {
  return (
    <div>Footer</div>
  );
}
export default Footer;

webpack.config.js

const path = require('path');
module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'main.js'
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        use: {
          loader: 'source-map-loader',
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-react"]
          }
        },
        exclude: /node_modules/
      },
    ],
  },
}

package.json

{
  "scripts": {
    "build": "webpack"
  }
}

index.html

build\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
</html>

水合

水合原本是指物质溶解在水里时与水发生的化学作用
此处水合指的是后端内容打到前端后，JS需要将事件绑定，才能够响应用户的交互或者DOM的更新行为
工作流
- 组件在服务器端拉取数据(水)，并在服务器端首次渲染
- 脱水: 对组件进行脱水，变成HTML字符串，脱去动态数据，成为风干标本快照
- 注水：发送到客户端后，重新注入数据(水)，重新变成可交互组件

index.html

build\index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
+ <div id="root"><div>Header</div><div>User</div><div>Footer</div></div>
  <script src="main.js"></script>
</body>

</html>

src\index.js

import React from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
import App from './App';
const root = document.getElementById('root');
-createRoot(root).render(<App />);
+hydrateRoot(root, <App />);

React18之前的服务器端渲染(SSR)

工作流
- 服务器内部获取数据
- 服务器内部渲染 HTML
- 客户端从远程加载代码
- 客户端开始水合
一切都是串行的，前一个任务没完成之前，后一任务都无法开始
这个操作必须是整体性的，而水合的过程可能比较慢，会引起卡顿
react-dom-server
https://zh-hans.legacy.reactjs.org/docs/react-dom-server.html
@babel/register在底层改写了 node 的 require 办法，在代码里引入 @babel/register模块后，所有通过require引入并且以.es6、.es、.jsx、.mjs和.js为后缀名的模块都会被 Babel 转译
@babel/plugin-transform-modules-commonjs转换ES模块为CommonJS

package.json

{
  "scripts": {
    "build": "webpack",
+   "start": "cross-env NODE_ENV=development nodemon -- server.js"
  }
}

server.js

const babelRegister = require('@babel/register');
babelRegister({
  ignore: [/node_modules/],
  presets: ["@babel/preset-react"],
  plugins: ['@babel/plugin-transform-modules-commonjs'],
});
const webpack = require('webpack');
const express = require('express');
const static = require('serve-static');
const webpackConfig = require('./webpack.config');
const render = require('./render');
webpack(webpackConfig, (err, stats) => {
  let statsJSON = stats.toJson({ assets: true });
  const assets = statsJSON.assets.reduce((memo, { name }) => {
    memo[name] = `/${name}`
    return memo;
  }, {});
  const app = express();
  app.get('/', async function (req, res) {
    render(req, res, assets);
  });
  app.use(static('build'));
  app.listen(8080, () => console.log('server started on port 8080'));
});

render.js

import React from 'react';
import App from "./src/App";
import { renderToString } from "react-dom/server";
function render(req, res, assets) {
  const html = renderToString(<App />);
  res.statusCode = 200;
  res.setHeader("Content-type", "text/html;charset=utf8");
  res.send(`
     <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="${assets['main.js']}"></script>
      </body>
      </html>
  `);
}
module.exports = render;

React18之后的服务器端渲染(SSR)

https://zh-hans.react.dev/reference/react-dom/server

Streaming SSR with selective hydration(选择性水合)
像流水一样，打造一个从服务端到客户端持续不断的渲染管线，而不是renderToString那样一次性渲染机制
在React18之前，这个操作必须是整体性的，而水合的过程可能比较慢，会引起局部卡顿，所以选择性水合可以在局部进行水合
服务端渲染把简单的res.send改为res.socket,这样的渲染就从单次行为转变为持续性行为
打破了以前串行的限制，优化前端的加载速度和可交互所需等待时间
服务器端的流式HTML使用 renderToPipeableStream
客户端的选择性Hydration 使用 <Suspense>