什么是React服务端渲染？我们来看下原理和示例！

大家好，今天小编给大家带来一篇关于react服务端渲染的文章。
那么什么是react服务端渲染呢？ 我们来看看。
React服务端渲染
写过React组件的同学都知道，React组件一般是基于浏览器端使用js渲染的。它所生成的Dom结构都是后期由js计算生成。如下图，我们可以看到页面源文件中id为root中的dom结构实际是空的。但实际在element元素中，已经可以看到Dom树的生成了。

图1:客户端渲染DOM结构图

图2:服务端渲染DOM结构图

React服务端渲染（简称SSR），也就是在服务器端直接渲染React组件，使用户在首屏便能感受到Dom树的存在，在页面html文件生成的同时，Dom结构也就存在了。用户看到的源文件即为图2。
那么为什么要使用服务端渲染呢？客户端渲染不是更能减轻服务端负担吗？ 我们来看下

为什么要使用服务端渲染

简单了解了React-SSR，那么我们使用服务端渲染的目的主要是为了解决如下几大难题：

搜索引擎优化（seo）
因React组件采用js在浏览器中渲染，实际搜索引擎爬虫爬到的数据也就是图一中的没有DOM结构的数据。，及其不友好，如图1。

可以解决首屏白屏问题
Js渲染的组件需要消耗性能，故在性能较差的终端中，浏览器端渲染组件所消耗的时间就会比较长。在浏览器执行js渲染组件时，对用户而言，就是所谓的白屏。

图3:开启服务端渲染前

图4:开启服务端渲染后