React SSR渲染

什么是客户端渲染

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

什么是服务器端渲染

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

React SSR 同构

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

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

实现 SSR

项目结构
react-ssrsrc 源代码文件夹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 实现给元素添加事件

React SSR渲染相关推荐

我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR
技术栈:webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌!可能是因为我很懒,导致...,然后,好吧,我比较懒,没有然 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
React SSR 服务器端渲染
React SSR 介绍什么是客户端渲染 CSR: Client Side Rendering 服务器端仅返回 JSON 数据,DATA 和 HTML 在客户端进行渲染什么是服务器端渲染 SSR: ...
react ssr 服务端渲染入门
react ssr 服务端渲染入门前言前后端同构,作为针对单页应用 SEO 优化乏力.首屏速度瓶颈等问题而产出的解决方案,近来在 react.vue 等前端技术栈中都得到了支持.当我们正打算抛弃传 ...
React SSR【React服务器端渲染】
目录 1.React SSR 介绍 2.服务器端渲染快速开始 3.客户端 React 附加事件 4.优化 5.路由支持 6.Redux 支持 1.React SSR 介绍什么是客户端渲染 ...
React SSR - 01 SSR 介绍和快速开始
React SSR 介绍什么是客户端渲染 CSR:Client Side Rendering 数据和 HTML 的拼接是在客户端(浏览器)使用 JavaScript 完成的,服务端只需要返回 JSO ...
大前端时代，如何做好C 端业务下的React SSR？\n
React在中后台业务里已经很好落地了,但对于C端(给用户使用的端,比如PC/H5)业务有其特殊性,对性能要求比较苛刻,且有SEO需求.另外团队层面也希望能够统一技术栈,小伙伴们希望成长,那么如何能够 ...