- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
今天写个小 Demo 来从头实现一下 react 的 SSR ,帮助理解 SSR 是如何实现的,有什么细节.
SSR 即 Server Side Rendering 服务端渲染,是指将网页内容在服务器端中生成并发送到浏览器的技术。相比于客户端渲染( CSR ), SSR 一般用于以下场景:
SEO
(搜索引擎优化):由于部分搜索引擎对 CSR
内容支持不佳,所以 SSR
可以提升网站在搜索引擎结果中的排名。 SSR
可以在服务器端生成完整的 HTML
页面,用户打开网页时能够更快地看到内容,不会看到长时间的白屏,可以提升用户体验。 CSR
需要从服务器将数据下载下来进行动态渲染,所以一些数据很容易被他人获取,而 SSR
由于数据到渲染的过程在服务端实现,所以可以用来隐藏一些不想让他人轻易获得的数据。 简单的 SSR 其实实现很简单,只需要在服务端导入要渲染的组件,然后调用 react-dom/server 包中提供的 renderToString 方法将该组件的渲染内容输出为字符串后返回客户端即可.
下面写一个简单的例子:
服务端代码:
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from '../ui/App';
const app = express();
app.get('/', (_: unknown, res: express.Response) => {
res.send(renderToString(<App />));
});
app.listen(4000, () => {
console.log('Listening on port 4000');
});
此处要注意 服务端需要支持 jsx 语法的解析 ,我这里直接使用 esno 执行 ts 代码,在 tsconfig.json 中配置 jsx 即可.
其实看到这里就能明白为什么在 SSR 的页面上使用 window 、 localstorage 等浏览器 API 需要放到 useEffect 里了,因为 该页面的组件都会被 server 端读取解析,而 server 端并没有这些 API .
然后看下 App 组件的代码:
import React, { useCallback } from 'react';
export default () => {
const log = useCallback(() => {
console.log('Hello world');
}, []);
return (
<div>
<p>react ssr demo</p>
<button onClick={log}>Click me</button>
</div>
);
};
启动服务器后 server 端就会使用 renderToString 将 <App /> 渲染成 html 字符串,然后通过 send 返回给前端,下面就是服务端返回的 html 内容:
<div>
<p>react ssr demo</p>
<button>Click me</button>
</div>
打开浏览器访问该地址即可看到服务端返回了该 html 片段:
如果你跟着上面的操作很快就会发现问题:为什么点按钮没法操作了?
其实原因很简单,因为我们只拿到了一个 html 并没有任何的 js ,事件绑定等自然是无法实现的,要复活组件的交互我们还需要很重要的一步 - hydrate 也就是常说的水合.
hydrate 即通过 react 将对应的组件重新渲染到 SSR 渲染的静态内容上,类似于 render 差异点在于 render 会忽略 root 元素中现有的 dom 而 hydrate 则会复用并会进行内容匹配检查.
Hydration failed because the initial UI does not match what was rendered on the server.
如果遇到上述错误即表示在客户端执行 hydrate 时服务端返回的初始的 dom 和 hydrate 接收到的需要进行渲染的 dom 不匹配.
说了这么多我们再来看下代码如何编写,首先要进行 hydrate 我们需要客户端的代码来执行:
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root')!, <App />);
然后将该代码进行编译打包,我这里就直接使用 webpack 进行打包:
const path = require('path');
module.exports = {
entry: './ui/index.tsx',
output: {
path: path.resolve(__dirname, 'static'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-typescript']
}
}
}
]
}
};
打包完成后生成一个 bundle.js 即可在客户端使用它来进行 hydrate .
然后我们再修改下 server 端的代码:
app.get('/', (_: unknown, res: express.Response) => {
res.send(
`
<div id="root">${renderToString(<App />)}</div>
<script src="/bundle.js"></script>
`
);
});
app.use(express.static('static'));
我们在静态内容的外层套上 root 元素,然后在下方引入我们刚刚编译的脚本,然后就可以在客户端看到我们想要的结果:
可以看到事件可以正常触发了.
此处还有个注意点,在 server 端要注意将静态字符串包裹在 root 元素中不要添加换行空格等,不然 react 在 hydrate 时依旧会因为内容不匹配而提示 Hydration failed (仅在 hydrateRoot 时出现,如果使用 hydrate 不会报错,不过 18 中 hydrate 已经被弃用。) 。
此时有些同学可能发现一些问题:前面的内容所渲染的内容都是静态的,如果要针对用户渲染出不同的内容比如用户信息等如何是好?
其实很简单,只需要在服务端将对应的信息作为 props 进行渲染即可,我们下面使用 userName 模拟一下:
app.get('/', (_: unknown, res: express.Response) => {
const userName = ['张三', '李四', '王五', '赵六'][(Math.random() * 4) | 0];
res.send(
`
<div id="root">${renderToString(<App userName={userName} />)}</div>
<script src="/bundle.js"></script>
`
);
});
可是客户端要如何与服务端匹配呢?此处有两种解决方案:
hydrate
操作。 可以看出方案 1 会带来明显的延时,所以一般会采用方案 2,实现一般可以使用全局变量或特定标签来实现:
app.get('/', (_: unknown, res: express.Response) => {
const userName = ['张三', '李四', '王五', '赵六'][(Math.random() * 4) | 0];
res.send(
`
<div id="root">${renderToString(<App userName={userName} />)}</div>
<script>
window.__initialState = { userName: '${userName}' };
</script>
<script src="/bundle.js"></script>
`
);
});
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root')!, <App {...window.__initialState} />);
React
中的 SSR
可以通过 renderToString
来实现,但是只能输出静态内容,要让页面支持交互需要搭配 hydrate
使用。 SSR
时服务端需要支持 jsx
语法的解析,因为服务端也需要读取组件。 hydrate
会检查服务端与客户端的内容是否匹配。 props
的约定。 本文的 demo 代码放置在 React SSR Demo 中,可自行取阅.
最后此篇关于ReactSSR-写个Demo一学就会的文章就讲到这里了,如果你想了解更多关于ReactSSR-写个Demo一学就会的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
就在我放松下来以为我对数组上下文中的指针有一个公平的理解时,我对下面的程序再次感到沮丧。我已经理解了数组 arr,arr 和 &arr 大小相同,但类型不同,但我无法牢牢掌握以下程序的输出。我尝试将其
这个问题在这里已经有了答案: Why whole structure can not be compared in C, yet it can be copied? (6 个答案) 关闭 9 年前。
今天我试图在我的代码中使用系统属性。当我输入 ./gradlew -Dorg.gradle.project.env=demo test 时,虽然我在脚本中成功打印了 env ,但发生了 NullPoi
概要 本节要实现的是多表关联查询的简单demo。场景是根据id查询某商品分类信息,并展示该分类下的商品列表。 1、Mysql测试数据 新建表Category(商品分类)和Product(商品
SpringCloud + Docker 的便利和强大真的超乎想象,我已经入坑了…好了,不说废话,记录一个简单的 Demo 供其他同学排坑。 前言 惯例不能丢,先上源代码:docker-demo
在没介绍正文之前先给大家介绍下数据更新方法支持的连贯操作方法有: 在上一篇文章中我们实现了数据的删除和批量删除,这一篇文章我们将实现数据的更新。 首先依然是预期效果图: 点击修
过滤html标签在php中可以有内置的函数了,但它过滤的太干净了,我们就整理了一下些利用正则来过滤指定html标签的例子,具体如下所示。 采集的时候有时候需要过滤掉多余的标签属性,比如 img标签
UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添
项目里面有一个需求,要对sql进行简单的语法分析 为了避免sql里面的字符串和注释对语法分析做干扰,我写了一个java函数,对sql进行修剪,删除里面字符串和注释,用空格代替 周末闲着没事,我用g
今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实
最近项目组同事跟我说遇到一个SQL性能问题,他说全表只有69条记录,客户端执行耗费了两分多钟,很不科学。我帮了分析出了原因并得到解决。下面小编安装类似表结构,构造了一个案例,测试截图如下所示:
新的一年又要到来了,各个大的公司又在这年末为大家送上了新春的祝福,支付宝还是延续了这几年的传统,在年末为大家送上了集五福的活动,为了大家能更快更好的扫出来大大的“福”,今天就带领大家利用python
我已经安装了http://download.jboss.org/jbpm/release/6.4.0.Final/jbpm-6.4.0.Final-installer-full.zip在这里找到htt
1、准备环境 服务器:linux(debian)+nginx+mysql+php 环境 框架:laravel 5.5 (确认能跑通) 需求:每天晚上1点执行定时操作 2、定时任务的步骤
下面通过一个小例子来说明cmake编译一个c++项目,生成可执行文件: 整理目录结构: CMake Lists.txt addlib build main.cpp 电脑上没有tree命
本文实例讲述了php实现基于微信公众平台开发SDK(demo)扩展的方法。分享给大家供大家参考。具体分析如下: 该扩展基于官方的微信公众平台SDK,这里只做了简单地封装,实现了一些基本的功能(如天
验证码不用多说,在 WEB-APP 中一般应用于:登录、注册、买某票、秒杀等场景。大家都接触过~可以说是千奇百怪,各式各样。 DEMO 目标功能 验证码页面输入。 页面更换验证码(异
下拉刷新在越来越多的app中使用,已经形成一种默认的用户习惯,遇到列表显示的内容时,用户已经开始习惯性的拉拉。在交互习惯上已经形成定性。之前在我的文章《ios学习笔记34—egotableviewp
一切尽在代码中,代码附有注释,欢迎大家参考。 ?
我试图找到答案,但没有任何结果。bin/console的一些命令和 ./psh.phar没有描述,所以很难理解它们的用途。 Shopware 6 中是否有从数据库中删除所有演示数据的命令? 最佳答案
我是一名优秀的程序员,十分优秀!