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