react实现ssr服务器端渲染总结和案例(实例)

1、什么是 SSR

? ? SSR 是 server side?render 的缩写，从字面上就可以理解

? ? 在服务器端渲染，那渲染什么呢，很显然渲染现在框架中的前后端分离所创建的虚拟 DOM

?

2、为什么要实现服务器端渲染

? ? 传统的 SPA 应用 (如 react )，存在不利于优化，首屏加载慢等。

? ? 服务器端渲染：

? ? 增加首屏加载速度，解决白屏问题

? ? 可以直接渲染页面，利于 SEO 优化

????

3、SSR 的实现

? ? 1. 创建 webpack 配置文件

?

? ? webpack.config.dev????? ? 即开发环境的配置

? ? webpack.config.prod????? ? 即生成环境的配置

?

? ? webpack.config.node????? ? 服务器端的配置文件

?

?

?

? ? 配置文件基本配置完成

?

? ? 2、修改 pakage.json 文件

? ? 我们需要修改 package.json 文件

?

?

????3、dev/prop 入口文件

?

? ? 4、node 服务端

? ? Node webpack 中的打包代码即是 App 该组件。

? ??

????查看 ssr 服务器

?

? ? 服务器代码实现

?

?

? ? 主要实现技术：

? ? 这里主要是用了 react 提供的 renderToString 方法

? ? renderToString? 主要是接收一个 react 组件，并且返回一段 html 结构字符串。

????

? ? readerToString 与 renderToStaticMakeUp?

? ?他们的作用相同

?

? ?区别在于：

? ? renderToString 渲染的时候带有 data-reactId ，这样就会增加流量，不过在客户端对比就会重新渲染

? ? renderToStaticMarkUp 渲染的时候不带 data-reactId ，节省流量，在客户端会重新刷新，出现闪屏

?

想了解更多知识(源码等)，想知道更多精华，看看我的博客吧? ?https://gilea.cn/

?

?https://www.cnblogs.com/jiebba