本文详细介绍了React服务端渲染（SSR）的概念、与客户端渲染的区别、为何使用SSR，以及SSR如何提升SPA体验。重点讲解了SSR的核心原理，包括基于React+Express的实现，同构路由的重要性以及数据同构的实现，探讨了存在的问题、数据预加载、SEO优化等关键点。
SSR介绍
Server Slide Rendering 服务端渲染
什么是服务端渲染
服务端渲染（Server-Side Render），是指将单页应用（SPA）在服务器端渲染为 HTML 片段，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。
与客户端渲染的区别
为什么使用服务器端渲染(SSR)？
- 更好的搜索引擎优化（Search-Engine-Optimization，SEO）
- 大部分网站都希望自己能够出现在搜索引擎的搜索页前列，这个前提就是网页内容要能够被搜索引擎的爬虫正确抓取到。虽然 Google 这样的搜索引擎已经可以检索浏览器端渲染的网页，但毕竟不是全部搜索引擎都能做到，如果搜索引擎的爬虫只能拿到服务器端渲染的内容，完全浏览器端渲染就行不通了
- 可以缩短“第一有意义渲染时间”（First-Meaningful-Paint-Time）解决首屏白屏问题
- 如果完全依赖于浏览器端渲染，那么服务器端返回的 HTML 就是一个空荡荡的框架和对 JavaScript 的应用，然后浏览器下载 JavaScript，再根据 JavaScript 中的 AJAX 调用获取服务器端数据，再渲染出 DOM 来填充网页内容，总共需要三个 HTTP 或 HTTPS 请求。
- 如果使用服务器端渲染，第一个 HTTP/HTTPS 请求返回的 HTML 里就包含可以渲染的内容了，这样用户第一时间就会感觉到“有东西画出来了”，这样的感知性能更好。
SSR+SPA 体验升级
只实现 SSR 其实没啥意义，技术上没有任何发展和进步，否则 SPA 技术就不会出现。
但是单纯的 SPA又不够完美，所以最好的方案就是这两种体验和技术的结合，第一次访问页面是服务端渲染，基于第一次访问后续的交互就是 SPA 的效果和体验，还不影响 SEO 效果，这就有点完美了。
单纯实现 ssr 很简单，毕竟这是传统技术，也不分语言，随便用 php 、jsp、asp、node 等都可以实现。
但是要实现两种技术的结合，同时可以最大限度的重用代码（同构），减少开发维护成本，那就需要采用 react 或者 vue 等前端框架相结合 node(ssr) 来实现。
本文主要说 ReactSSR技术 ,当然 vue 也一样，只是技术栈不同而已
核心原理(基于React+Express)
如下图：
整体来说 react 服务端渲染原理不复杂，其中最核心的内容就是同构。
node server 接收客户端请求，得到当前的 req url path,然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props 、 context或者 store 形式传入组件，然后基于 react 内置的服务端渲染api renderToString()orrenderToNodeStream() 把组件渲染为 html字符串或者 stream流, 在把最终的 html 进行输出前需要将数据注入到浏览器端(注水)，server 输出(response)后浏览器端可以得到数据(脱水)，浏览器开始进行渲染和节点对比，然后执行组件的 componentDidMount 完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html节点，整个流程结束。
- 服务端直接给出Html
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "../client/app";
const app = new express();
app.use(express.static("public"));
app.get("/", (req, res) => {
const App = renderToString(<App />);
res.send(` <html>
<head>
<title>hello world</title>
</head>
<body>
<div>${App}</div>
</script>
</body>
</html>`);
});
import React from "react";
const handleClick = () => {
alert("click");
};
function App() {
return <button onClick={handleClick}>hello ssr </button>;
}
export default App;
浏览器访问返回的结构
<html>
<head>
<title>hello world</title>
</head>
<body>
<div id="root"><button data-reactroot="">hello ssr </button></div>
</script>
</body>
</html>
此种情况下,并没有完成事件绑定呢？接下来就要用到如下
2. 同构渲染（混合渲染）
- 同构指的是一套代码在服务端和客户端运行，服务端输出html结构，数据，js，客户端接管页面进行补充渲染，填充数据，绑定事件等~
- 一句话：数据和Html骨架有服务端给出,客户端补充渲染。
- 核心代码(server)
import App from "../client/app";
const app = new express();
app.use(express.static("public"));
function Content() {
return <p>this is content</p>;
}
app.get("/", (req, res) => {
const root = renderToString(<App />);
res.send(` <html>
<head>
<title>hello world</title>
</head>
<body>
<div id="root">${root}</div>
<script src ='./index.js'>
</script>
</body>
</html>`);
});
- index.js(client)
import React from 'react';
import { hydrate } from 'react-dom'
hydrate(<APP />,document.getElementById("root"))
import React from "react";
const handleClick = () => {
alert("click");
};
fu
最低0.47元/天 解锁文章
扫一扫
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
