react-ssr

于 2022-04-12 20:31:59 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： 技术 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyebuzhidao321/article/details/121872931
版权

一、ReactSSR相关概念回顾

什么是客户端渲染

CSR：Client Side Rendering
服务器端仅返回 JSON 数据, DATA 和 HTML 在客户端进行渲染

什么是服务器端渲染

SSR：Server Side Rendering
服务器端返回HTML, DATA 和 HTML 在服务器端进行渲染

客户端渲染存在的问题

  1. 首屏等待时间长, 用户体验差
  2. 页面结构为空, 不利于 SEO

在这里插入图片描述
SPA 应用中服务器端渲染解决的问题
在这里插入图片描述

二、实现ReactSSR雏形

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

创建 Node 服务器

在这里插入图片描述

实现 React SSR

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

三、服务器端程序webpack打包配置

webpack 打包配置
问题: Node 环境不支持 ESModule 模块系统, 不支持 JSX 语法
webpack.server.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const nodeExternals = require('webpack-node-externals');

const config = {
  target: 'node',
  entry: './src/server/index.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  externals: [nodeExternals()]
}

module.exports = merge(baseConfig, config);

package.json

  "scripts": {
    "dev:server-build": "webpack --config webpack.server.js --watch",
  },

项目启动命令配置

  1. 配置服务器端打包命令: “dev:server-build”: “webpack --config webpack.server.js --watch”
  2. 配置服务端启动命令: “dev:server-run”: “nodemon --watch build --exec “node build/bundle.js””

四、为组件元素添加事件

实现思路分析
在客户端对组件进行二次"渲染", 为组件元素附加事件.
客户端二次 “渲染” hydrate
使用 hydrate 方法对组件进行渲染, 为组件元素附加事件.
hydrate 方法在实现渲染的时候, 会复用原本已经存在的 DOM 节点, 减少重新生成节点以及删除原本 DOM 节点的开销.
通过 react-dom 导入 hydrate.

home.js

import React from "react";
import { Link } from 'react-router-dom';

function Home() {
  return <div onClick={() => console.log("Hello")}>
    Home works
  </div>;
}

export default Home;

client.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import routes from "../share/routes";
import { Provider } from "react-redux";
import store from "./createStore";

ReactDOM.hydrate(
  <Provider store={store}>
    <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

webpack.client.js

const path = require("path");
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');

const config = {
  entry: "./src/client/index.js",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js"
  }
};

module.exports = merge(baseConfig, config);

package.json

  "scripts": {
  "dev:client-build": "webpack --config webpack.client.js --watch"
  }

五、优化：合并webpack配置

const path = require("path");
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');

const config = {
  entry: "./src/client/index.js",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js"
  }
};

module.exports = merge(baseConfig, config);
  1. webpack 配置
    打包目的: 转换JSX语法, 转换浏览器不识别的高级 JavaScript 语法
    打包目标位置: public 文件夹
  2. 打包启动命令配置
    “dev:client-build”: “webpack --config webpack.client.js --watch”

在响应给客户端的 HTML 代码中添加 script 标签, 请求客户端 JavaScript 打包文件.
在这里插入图片描述
服务器端实现静态资源访问
服务器端程序实现静态资源访问功能, 客户端 JavaScript 打包文件会被作为静态资源使用
在这里插入图片描述

六、合并项目启动命令

在这里插入图片描述

七、优化：服务端打包文件体积优化

问题：在服务器端打包文件中, 包含了 Node 系统模块. 导致打包文件本身体积庞大.
解决：通过 webpack 配置剔除打包文件中的 Node 模块

在这里插入图片描述

element-icons.ttf
element-icons.woff

八、代码拆分

将启动服务器代码和渲染代码进行模块化拆分

优化代码组织方式, 渲染 React 组件代码是独立功能, 所以把它从服务器端入口文件中进行抽离.

server/render.js

import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import routes from "../share/routes";
import { renderRoutes } from "react-router-config";
import { Provider } from "react-redux";
import serialize from 'serialize-javascript';

export default (req, store) => {
  const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path}>{renderRoutes(routes)}</StaticRouter>
    </Provider>
  );
  const initalState = serialize(store.getState());
  return `
  <html>
    <head>
      <title>React SSR</title>
    </head>
    <body>
      <div id="root">${content}</div>
      <script>window.INITIAL_STATE = ${initalState} </script>
      <script src="bundle.js"></script>
    </body>
  </html>
`;
};

server/index.js

import app from './http';
import renderer from './renderer';
import createStore from './createStore';
import routes from '../share/routes';
import { matchRoutes } from 'react-router-config';

app.get('*', (req, res) => {
  const store = createStore();
  // 1. 请求地址 req.path
  // 2. 获取到路由配置信息 routes
  // 3. 根据请求地址匹配出要渲染的组件的路由对象信息
  const promises = matchRoutes(routes, req.path).map(({route}) => {
    // 如何才能知道数据什么时候获取完成
    if (route.loadData) return route.loadData(store)
  })

  Promise.all(promises).then(() => {
    res.send(renderer(req, store));
  }) 
});

九、实现服务器端路由

实现思路分析
在 React SSR 项目中需要实现两端路由.
客户端路由是用于支持用户通过点击链接的形式跳转页面.
服务器端路由是用于支持用户直接从浏览器地址栏中访问页面.
客户端和服务器端公用一套路由规则

home.js

import React from "react";
import { Link } from 'react-router-dom';

function Home() {
  return <div onClick={() => console.log("Hello")}>
    Home works
    <Link to="/list">jump to list</Link>
  </div>;
}

export default Home;

router.js

import Home from '../share/pages/Home';
import List from '../share/pages/List';

export default [{
  path: '/',
  component: Home,
  exact: true
}, {
  path: '/list',
  ...List
}]

server/index.js

import app from './http';
import renderer from './renderer';
import createStore from './createStore';
import routes from '../share/routes';
import { matchRoutes } from 'react-router-config';

app.get('*', (req, res) => {
  const store = createStore();
  // 1. 请求地址 req.path
  // 2. 获取到路由配置信息 routes
  // 3. 根据请求地址匹配出要渲染的组件的路由对象信息
  const promises = matchRoutes(routes, req.path).map(({route}) => {
    // 如何才能知道数据什么时候获取完成
    if (route.loadData) return route.loadData(store)
  })

  Promise.all(promises).then(() => {
    res.send(renderer(req, store));
  })
  
});

server/render.js

import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import routes from "../share/routes";
import { renderRoutes } from "react-router-config";
import { Provider } from "react-redux";
import serialize from 'serialize-javascript';

export default (req, store) => {
  const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path}>{renderRoutes(routes)}</StaticRouter>
    </Provider>
  );
  const initalState = serialize(store.getState());
  return `
  <html>
    <head>
      <title>React SSR</title>
    </head>
    <body>
      <div id="root">${content}</div>
      <script>window.INITIAL_STATE = ${initalState} </script>
      <script src="bundle.js"></script>
    </body>
  </html>
`;
};

十、实现客户端路由

client/index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import routes from "../share/routes";
import { Provider } from "react-redux";
import store from "./createStore";

ReactDOM.hydrate(
  <Provider store={store}>
    <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

home.js

import React from "react";
import { Link } from 'react-router-dom';

function Home() {
  return <div onClick={() => console.log("Hello")}>
    Home works
    <Link to="/list">jump to list</Link>
  </div>;
}

export default Home;

十一、实现客户端redux

client/createsStore.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../share/store/reducers';

export default () => createStore(reducer, {}, applyMiddleware(thunk))

client/index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import routes from "../share/routes";
import { Provider } from "react-redux";
import store from "./createStore";

ReactDOM.hydrate(
  <Provider store={store}>
    <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

store/action/user.action.js

import axios from 'axios';

export const SAVE_USER = 'save_user';

// 发送请求 获取用户列表数据
export const fetchUser = () => async dispatch => {
  // let response = await axios.get('https://jsonplaceholder.typicode.com/users');
  let response = {
    data: [{id: 1, name: "</script><script>alert(1)</script>"}]
  }
  dispatch({
    type: SAVE_USER,
    payload: response
  })
}

store/action/user.reducer.js

import { SAVE_USER } from "../actions/user.action";

export default (state = [], action) => {
  switch(action.type) {
    case SAVE_USER:
      return action.payload.data;
    default:
      return state;
  }
}

store/action/user.index.js

import { combineReducers } from 'redux';
import userReducer from './user.reducer';

// {user: []}
export default combineReducers({
  user: userReducer
});

遇到问题：浏览器不支持异步函数

webpack配置下
在这里插入图片描述

十二、实现服务器端redux

1、
server/createStore.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../share/store/reducers';

export default () => createStore(reducer, {}, applyMiddleware(thunk))

server/index.js

import app from './http';
import renderer from './renderer';
import createStore from './createStore';
import routes from '../share/routes';
import { matchRoutes } from 'react-router-config';

app.get('*', (req, res) => {
  const store = createStore();
  // 1. 请求地址 req.path
  // 2. 获取到路由配置信息 routes
  // 3. 根据请求地址匹配出要渲染的组件的路由对象信息
  const promises = matchRoutes(routes, req.path).map(({route}) => {
    // 如何才能知道数据什么时候获取完成
    if (route.loadData) return route.loadData(store)
  })

  Promise.all(promises).then(() => {
    res.send(renderer(req, store));
  })
  
});

server/render.js

import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import routes from "../share/routes";
import { renderRoutes } from "react-router-config";
import { Provider } from "react-redux";
import serialize from 'serialize-javascript';

export default (req, store) => {
  const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path}>{renderRoutes(routes)}</StaticRouter>
    </Provider>
  );
  const initalState = serialize(store.getState());
  return `
  <html>
    <head>
      <title>React SSR</title>
    </head>
    <body>
      <div id="root">${content}</div>
      <script>window.INITIAL_STATE = ${initalState} </script>
      <script src="bundle.js"></script>
    </body>
  </html>
`;
};
拾荒李
关注
专栏目录
React SSR【React服务器端渲染】
weixin_37883657的博客
08-25 593
目录 1、React SSR 介绍 2、服务器端渲染快速开始 3、客户端 React 附加事件 4、优化 5、路由支持 6、Redux 支持 1、React SSR 介绍 什么是客户端渲染 CSR：Client Side Rendering 服务器端仅返回 JSON 数据, DATA 和 HTML 在客户端进行渲染. 什么是服务端渲染 SSR：Server Side Rendering 服务器端返...
react ssr
TIANWENJU
10-26 495
SSR介绍 Server Slide Rendering 服务端渲染 什么是服务端渲染 服务端渲染（Server-Side Render），是指将单页应用（SPA）在服务器端渲染为 HTML 片段，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。 与客户端渲染的区别 为什么使用服务器端渲染(SSR)？ 更好的搜索引擎优化（Search-Engine-Optimization，SEO） 大部分网站都希望自己能够出现在搜索引擎的搜索页前列，这个前提就是网页内容要能够被搜索引擎的爬虫正确
React SSR
zep
02-25 3791
一、为什么需要SSR呢？ 单页面富应用的局限： 之前我们开发的应用程序，如果直接请求可以看到上面几乎没有什么内容。 但是为什么我们页面可以看到大量的内容呢？ 因为当我们请求下来静态资源之后会执行JS，JS会去请求数据，并且渲染我们想要看到的。 但是这个过程存在另外两个问题： 问题一：首屏显示的速度较慢； 问题二：不利于SEO的优化； 如何解决这个问题呢？ 采用服务端渲染； 二、认识SSR和同构？ SSR（Server Side Rendering，服务端渲染），指的是页面在服务器
react-react ssr
quanxin0222的博客
11-26 1944
reactssr的方法有很多，但在思路上基本都是可以互通的。本文提供一种reactssr的方法。 一、要达到什么功能？ 既然是服务端渲染，那么本事就得是达到服务端渲染解决的一些固有问题，比如seo、直接输出已经被渲染成html文档片段 页面切换时，使用客户端渲染的路由；页面刷新时，使用服务端路由返回当前页面 二、分析功能 一、使用的技术栈 开发依赖：wepback、webpack-cli等脚手架相关、babel、preset-react等编译相关、nodemon、npm-run-all等命令行工具
React-SSR
麦子
12-05 465
一、自己写的demo react-ssr 二、什么是服务器端渲染 1、服务器端渲染：页面上的内容是由服务器生产的 cnpm i express -S let express=require('express'); let app=express(); app.get('/',(req,res) => { res.send(` <html> <body> <div id="root">h
react-ssr 万字长文的服务端渲染
冷月心的博客
06-23 1055
react-ssr 万字长文的服务端渲染
react-ssr:将SSR作为视图模板引擎
05-07
概述 SSR（服务器端渲染）作为视图模板引擎 动态props 将服务器数据传递给React客户端props 适用于： 管理面板 写博客 开发人员经验 Webpack和Babel的零配置 ...$ npm install --save @react-ssr/core @react-ssr/ex
react-ssr-prepass:自定义的部分React SSR渲染器，用于预取和暂停
05-05
react-ssr-prepass react-dom/server还没有悬念支持。 今天， react-ssr-prepass在服务器端提供了悬念，直到发生为止。 :sparkles: react-ssr-prepass是服务器端的部分React渲染器，它对React元素树进行预渲染，并...
react-ssr-adsense:react服务端渲染接google adsense
05-27
@hustcc react-adsense不支持服务端渲染框架，受启发写了react-ssr-adsense React-ssr-adsense react-ssr-adsense是Google AdSense的React-ssr-component。支持#nextjs 演示： : 1.安装 npm install --save react...
react-ssr-starter：所有已引入的React环境
02-05
react-ssr-starter 所有已经引入了React环境。 产品特点 安装 $ git clone https://github.com/osamu38/react-ssr-starter.git $ cd react-ssr-starter $ npm i 跑 $ npm run dev 转到http://localhost:2525/ 。 ...
react-最小而美的EggReactSSR服务端渲染应用骨架
08-15
最小而美的Egg React 服务端渲染应用骨架
react-ssr:清晰便捷的服务器端渲染React模板
05-27
React同构（SSR，CSR） 该模板适用于那些厌倦了寻找快速入门模板的开发人员。 该模板可以灵活升级。 根据需要使用它。 支持的功能 服务器端渲染 客户端渲染 同构渲染 热模块更换 Webpack开发服务器 代码拆分 组件延迟加载 Docker包装器 CSS和SCSS支持 待办事项功能 React Context API API配置 安装 克隆并安装依赖项 $ git clone https://github.com/mstrluke/react-ssr.git $ cd react-ssr $ yarn install 如何通过npm或yarn运行 开始之前，您应该将envs从.env.dev复制到.env 生成源 $ yarn build or npm run build 开始开发 $ yarn dev or npm run dev 开始生产 $ yarn prod or
react-ssr：基于React，koa实现的React服务端渲染方案
02-03
ReactSSR 令人愉悦的React服务器端渲染 在线演示 基于这个demo扩展的做了个人博客。可以参考下 ReactSSR 这是基于React ， React-Router ， Redux ， Koa2.0实现的React服务端渲染方案。为了更好的演示，已实现一个简单的电影首页，电影详情页。数据资源是豆瓣上的资源。样式也参考了豆瓣的样式 快速上手 // 安装依赖 npm install // 为了构建一个模板(dist/index.html)给koa模板引擎使用 npm run build:local // 启动本地node服务器，这里设置的端口是4322 npm run server:
详解超简单的react服务器渲染(ssr)入坑指南
10-17
主要介绍了详解超简单的react服务器渲染(ssr)入坑指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-node-ssr:react-node-express ssr测试
05-25
这是react-node-ssr的测试程序 概述 现在，它可以支持redux和react router ，以及将客户端和服务器打包并压缩到dist 。 用 npm i npm run build:all npm start 但 您应该自己配置数据库。 请参考此文件： ./model/db.js 。
React-ssr
02-14
React-ssr 环境搭建 webpack webpack-cli babel加载器@ babel / core 打包前的代码并实时编译 @ babel /预设环境 识别导入语法，其他es6语法 @ babel /预设React 识别jsx语法 webpack合并 合并webpack配置 webpack-...
react的SSR(3)
qq_18417627的博客
03-05 364
上回我们完成了开发环境的热更新，这次我们要完成的是针对SSR的路由。 服务端渲染的路由和客户端渲染的路由并没有很大差距，主要差距在服务端接受到url之后解析路由拿到的数据，然后返回特定页面，之后的的渲染又全部交由客户端完成。 也就是说，服务端渲染其实只在用户第一次访问的时候，服务端路由是起效的，之后全部是靠客户端完成的。但是这里我们要考虑路由匹配失效的情况。 首先我们下载react-router-...
react的SSR(2)
qq_18417627的博客
03-05 241
书接上回，在上回的笔记中，已经完成了react的一个最简单的实践，但是这个实践还有很多问题，这次我们来解决一下这些问题。 在这回我们主要解决项目在开发时的热更新问题和css的加载问题，顺便把这个项目目录改一改，让他改的像个正经的项目，而不是用于验证可行性的玩具。 开发中的热更新 在做react的开发的时候，大家肯定非常熟悉webpack-hot-server给我们提供的热更新，他启动了一个node...
React SSR路由支持实现
weixin_43016472的博客
08-27 352
实现思路分析 在 React SSR 项目中需要实现两端路由. 客户端路由是用于支持用户通过点击链接的形式跳转页面. 服务器端路由是用于支持用户直接从浏览器地址栏中访问页面. 客户端和服务器端公用一套路由规则，路由规则是同构代码 路由规则 使用数组形式配置信息，在普通的 node 环境下也可识别 // share/routes.js import Home from '../share/pages/Home'; import List from '../share/pages/List'; export
react ssr项目
最新发布
08-25
在这个React SSR项目中，列表页面使用的是类组件。项目基于koa-react-ssr，并且可以在GitHub上找到该项目的详细配置和代码。您可以通过点击链接来查看该项目的正文。<span class="em">1</span><span class="em">2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值