React之服务端渲染
一、是什么
在SSR中 (opens new window)，我们了解到Server-Side Rendering ，简称SSR，意为服务端渲染
指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程
其解决的问题主要有两个：
- SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
- 加速首屏加载，解决首屏白屏问题
二、如何做
在react中，实现SSR主要有两种形式：
- 手动搭建一个 SSR 框架
- 使用成熟的SSR 框架，如 Next.JS
这里主要以手动搭建一个SSR框架进行实现
首先通过express启动一个app.js文件，用于监听3000端口的请求，当请求根目录时，返回HTML，如下：
const express = require('express')
const app = express()
app.get('/', (req,res) => res.send(`
<html><head><title>ssr demo</title></head><body>Hello world</body>
</html>
`))app.listen(3000, () => console.log('Exampleapp listening on port 3000!'))
然后再服务器中编写react代码，在app.js中进行应引用
import React from 'react'const Home = () =>{return <div>home</div>}export default Home
为了让服务器能够识别JSX，这里需要使用webpakc对项目进行打包转换，创建一个配置文件webpack.server.js并进行相关配置，如下：
const path = require('path') //node的path模块
const nodeExternals = require('webpack-node-externals')module.exports = {target:'node',mode:'development', //开发模式entry:'./app.js', //入口output: { //打包出口filename:'bundle.js', //打包后的文件名path:path.resolve(__dirname,'build') //存放到根目录的build文件夹},externals: [nodeExternals()], //保持node中require的引用方式module: {rules: [{ //打包规则test: /\.js?$/, //对所有js文件进行打包loader:'babel-loader', //使用babel-loader进行打包exclude: /node_modules/,//不打包node_modules中的js文件options: {presets: ['react','stage-0',['env', { //loader时额外的打包规则,对react,JSX，ES6进行转换targets: {browsers: ['last 2versions'] //对主流浏览器最近两个版本进行兼容}}]]}}]}
}
接着借助react-dom提供了服务端渲染的 renderToString方法，负责把React组件解析成html
import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import Home from'./src/containers/Home'const app= express()
const content = renderToString(<Home/>)
app.get('/',(req,res) => res.send(`
<html><head><title>ssr demo</title></head><body>${content}</body>
</html>
`))app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))
上面的过程中，已经能够成功将组件渲染到了页面上
但是像一些事件处理的方法，是无法在服务端完成，因此需要将组件代码在浏览器中再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为同构
重构通俗讲就是一套React代码在服务器上运行一遍，到达浏览器又运行一遍：
- 服务端渲染完成页面结构
- 浏览器端渲染完成事件绑定
浏览器实现事件绑定的方式为让浏览器去拉取JS文件执行，让JS代码来控制，因此需要引入script标签
通过script标签为页面引入客户端执行的react代码，并通过express的static中间件为js文件配置路由，修改如下：
import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from'react-dom/server'//引入renderToString方法
import Home from './src/containers/Home'const app = express()
app.use(express.static('public'));
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹const content = renderToString(<Home/>)app.get('/',(req,res)=>res.send(`
<html><head><title>ssr demo</title></head><body>${content}<script src="/index.js"></script></body>
</html>
`))app.listen(3001, () =>console.log('Example app listening on port 3001!'))
然后再客户端执行以下react代码，新建webpack.client.js作为客户端React代码的webpack配置文件如下：
const path = require('path') //node的path模块module.exports = {mode:'development', //开发模式entry:'./src/client/index.js', //入口output: { //打包出口filename:'index.js', //打包后的文件名path:path.resolve(__dirname,'public') //存放到根目录的build文件夹},module: {rules: [{ //打包规则test: /\.js?$/, //对所有js文件进行打包loader:'babel-loader', //使用babel-loader进行打包exclude: /node_modules/, //不打包node_modules中的js文件options: {presets: ['react','stage-0',['env', { //loader时额外的打包规则,这里对react,JSX进行转换targets: {browsers: ['last 2versions'] //对主流浏览器最近两个版本进行兼容}}]]}}]}
}
这种方法就能够简单实现首页的react服务端渲染，过程对应如下图：
在做完初始渲染的时候，一个应用会存在路由的情况，配置信息如下：
import React from 'react' //引入React以支持JSX
import { Route } from 'react-router-dom' //引入路由
import Home from './containers/Home' //引入Home组件export default (<div><Route path="/" exact component={Home}></Route></div>
)
然后可以通过index.js引用路由信息，如下：
import React from 'react'
import ReactDom from 'react-dom'
import { BrowserRouter } from'react-router-dom'
import Router from'../Routers'const App= () => {return (<BrowserRouter>{Router}</BrowserRouter>)
}ReactDom.hydrate(<App/>, document.getElementById('root'))
这时候控制台会存在报错信息，原因在于每个Route组件外面包裹着一层div，但服务端返回的代码中并没有这个div
解决方法只需要将路由信息在服务端执行一遍，使用使用StaticRouter来替代BrowserRouter，通过context进行参数传递
import express from 'express'
import React from 'react'//引入React以支持JSX的语法
import { renderToString } from 'react-dom/server'//引入renderToString方法
import { StaticRouter } from 'react-router-dom'
import Router from '../Routers'const app = express()
app.use(express.static('public'));
//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹app.get('/',(req,res)=>{const content = renderToString((//传入当前path//context为必填参数,用于服务端渲染参数传递<StaticRouter location={req.path} context={{}}>{Router}</StaticRouter>))res.send(`<html><head><title>ssr demo</title></head><body><div id="root">${content}</div><script src="/index.js"></script></body></html>`)
})app.listen(3001, () => console.log('Exampleapp listening on port 3001!'))
这样也就完成了路由的服务端渲染
三、原理
整体react服务端渲染原理并不复杂，具体如下：
node server 接收客户端请求，得到当前的请求url 路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props、context或者store 形式传入组件
然后基于 react 内置的服务端渲染方法 renderToString()把组件渲染为 html字符串在把最终的 html进行输出前需要将数据注入到浏览器端
浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html 节点，整个流程结束
相关文章：
React之服务端渲染
一、是什么 在SSR中 (opens new window)，我们了解到Server-Side Rendering ，简称SSR，意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可…...
jetson nano刷机更新Jetpack
只是记录个人在使用英伟达jetson Nano的经历，由于头一次尝试，所以特此记录需要的问题和经验。 一，英伟达刷机教程（jetson nano 版本） 本次我是直接刷机到TF卡，然后TF卡作为启动盘进行启动，我看网上有带EMMC版本的，好像可以直接把系统镜像安装到EMMC里面。但是有个问题…...
Android官方ShapeableImageView描边/圆形/圆角图，xml布局实现
Android官方ShapeableImageView描边/圆形/圆角图，xml布局实现 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.…...
ubuntu扩大运行内存, 防止编译卡死
首先查看交换分区大小 grep SwapTotal /proc/meminfo 1、关闭交换空间 sudo swapoff -a 2、扩充交换空间大小，count64就是64G 1G x 64 sudo dd if/dev/zero of/swapfile bs1G count64 3、设置权限 sudo chmod 600 /swapfile 4、指定交换空间对应的设备文件 …...
Kafka集群修改单个Topic数据保存周期
在大数据部门经常使用Kafka集群，有的时候大数据部门可能在Kafka中的Topic数据保存时间不需要很长，一旦被消费后就不需要一直保留。默认Topic存储时间为7day，个别的Topic或者某台Kafka集群需要修改Topic数据保存的一个周期，调整为3…...
selenium模拟登录无反应
在使用自动化工具selenium时对某些网站登录界面send_keys输入账号密码，运行时却没有自己想要的结果出现，这是因为你碰到前端二般的开发人员，他们用的是HTML嵌套，这对后端人员造成了一些麻烦，废话不多说，直接…...
指针变量未分配空间或者初始化为空指针使用问题
提示：关于指针 文章目录 前言一、指针的使用总结 前言 在看c书籍的时候，看到浅复制和深复制时，说到成员为指针的时候，会出异常。但是其实没有更多的感想，但是联想到上次考试指针没分配空间导致程序异常的情况…...
力扣第763题 划分字母区间 c++ 哈希 + 双指针 + 小小贪心
题目 763. 划分字母区间 中等 相关标签 贪心 哈希表 双指针 字符串 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段，同一字母最多出现在一个片段中。 注意，划分结果需要满足：将所有划分结果按顺序连接，得…...
js 代码中的 “use strict“； 是什么意思 ?
use strict 是一种 ECMAscript5 添加的（严格）运行模式，这种模式使得 Javascript 在更严格的条件下运行。 设立"严格模式"的目的，主要有以下几个： 消除 Javascript 语法的一些不合理、不严谨之处，…...
用于读取验证码的 OCR 模型
介绍 此示例演示了使用功能 API 构建的简单 OCR 模型。除了结合 CNN 和 RNN 之外，它还说明了如何实例化新层并将其用作“端点层”来实现 CTC 损失。 设置 import os import numpy as np import matplotlib.pyplot as pltfrom pathlib import Path from collections import Co…...
Uniapp 跳转回上一页面并刷新页面数据
比如我从A页面跳转到B页面 然后再从B页面返回到A页面 顺带刷新一下A页面数据 let pages getCurrentPages(); // 当前页面 //获取当前页面栈let beforePage pages[pages.length - 3]; // //获取上一个页面实例对象beforePage.$vm.reloadList(); //调用它方法然后跳转…...
DeOldify 接口化改造 集成 Flask
类似的图片修复项目 GFPGAN 的改造见我另一篇文 https://blog.csdn.net/weixin_43074462/article/details/132497146 DeOldify 是一款开源软件，用于给黑白照片或视频上色，效果还不错。 安装部署教程请参考别的文章，本文基于你给项目跑通&…...
Vue 3响应式对象: ref和reactive
目录 什么是响应式对象？ Ref Reactive Ref vs Reactive 适用场景： 访问方式： 引用传递： 性能开销： 响应式对象优点 响应式对象缺点 总结 Vue 3作为一种流行的JavaScript框架，提供了响应式编程的…...
Unity3D 如何用unity引擎然后用c#语言搭建自己的服务器
Unity3D是一款强大的游戏开发引擎，可以用于创建各种类型的游戏。在游戏开发过程中，经常需要与服务器进行通信来实现一些功能，比如保存和加载游戏数据、实现多人游戏等。本文将介绍如何使用Unity引擎和C#语言搭建自己的服务器，并给…...
带有 Vagrant 和 Virtualbox 的 Elasticsearch 集群
模拟分布式存储和计算环境的一种简单方法是使用 Virtualbox 作为 VM（“虚拟机”）的提供者，使用 Vagrant 作为前端脚本引擎来配置、启动和停止这些 VM。这篇文章的目标是构建一个集群虚拟设备，提供 Elasticsearch 作为可由主机使用…...
Cross Site Scripting (XSS)
攻击者会给网站发送可疑的脚本，可以获取浏览器保存的网站cookie， session tokens, 或者其他敏感的信息，甚至可以重写HTML页面的内容。 背景 XSS漏洞有不同类型，最开始发现的是存储型XSS和反射型XSS，2005，Am…...
VDA到Excel方案介绍之自定义邮件接收主题
VDA标准是德国汽车工业协会（Verband der Automobilindustrie，简称VDA）制定的一系列汽车行业标准。这些标准包括了汽车生产、质量管理、供应链管理、环境保护、安全性能等方面的规范和指南。VDA标准通常被德国和国际上的汽车制造商采用&#x…...
【opencv】【CPU】windows10下opencv4.8.0-cuda C++版本源码编译教程
【opencv】【CPU】windows10下opencv4.8.0-cuda C版本源码编译教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【opencv】【CPU】windows10下opencv4.8.0-cuda C版本源码编译教程前言准备工具cmakeopencv4.8.0opencv_contrib CMake编译VS2…...
多分类loss学习记录
这里简单的记录在人脸识别/声纹识别中常用的分类loss。详细原理可以参考其他博客。 扩展资料1 扩展资料2 L-softmax A-softmax AM-softmax L-softmax ：基于softmax加入了margin， Wx 改写为||w||||x||cos(角度)，将角度变为了m角度 A-softmax &…...
Linux创建逻辑卷并扩容（超详细）
目录 编辑 一、概念解析 1、LV逻辑卷 2、PV物理卷 3、VG卷组 二、扩容前准备 三、创建逻辑卷并扩容 1、打开虚拟机 2、进入root用户 3、查看新加入的硬盘 4、创建主分区 5、创建物理卷 6、打包为一个卷组 7、创建逻辑卷 8、格式化逻辑卷 9、挂载逻辑卷--开机自…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...