客户端渲染和服务端渲染的区别（转）

服务端渲染 ：DOM树在服务端生成，然后返回给前端。

客户端渲染 （SSR）：前端去后端取数据生成DOM树。

服务端渲染的优点 ：

1、尽量不占用前端的资源，前端这块耗时少，速度快。

2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

服务端渲染的缺点 ：

1、不利于前后端分离，开发的效率降低了。

2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。

客户端渲染的优点 ：

1、前后端分离，开发效率高。

2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。

客户端渲染的缺点 ：

1、前端响应速度慢，特别是首屏，这样用户是受不了的。

2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。

服务端和客户端渲染的区别 ：

1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染：

源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。

应该使用服务端渲染还是客户端渲染：

我们要根据业务场景去选择渲染的方式。

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用 服务端渲染和客户端渲染结合 的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

本文主要介绍 UmiJS 的预渲染功能。

服务端渲染（Server-Side Rendering），是指由 服务端 完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。

服务端渲染，首先得有后端服务器（一般是 Node.js）才可以使用，而没有后端服务器的情况下，可以使用 预渲染 。

预渲染与服务端渲染唯一的不同点在于 渲染时机 ，服务端渲染的时机是在用户访问时执行渲染（即实时渲染，数据一般是最新的），预渲染的时机是在项目构建时，当用户访问时，数据不一定是最新的（ 如果数据没有实时性，可以直接考虑预渲染 ）。

预渲染在构建时执行渲染，将渲染后的 HTML 片段生成静态 HTML 文件。无需使用 web 服务器实时动态编译 HTML，适用于 静态站点生成 。

Umi3 在 SSR 上做了大量优化及开发体验的提升，具有以下特性：

默认情况下，服务端渲染时关闭的，可通过配置开启：

服务端渲染的数据获取方式与 SPA(单页应用) 有所不同，为了让客户端和服务端都能获取到同一份数据，Umi 提供了页面级数据的预获取。

每个页面可能有单独的数据预获取逻辑，这里我们会获取页面组件上的 getInitialProps 静态方法，执行后将结果注入到该页面组件的 props 中，如：

getInitialProps 有几个固定参数：

为了结合数据流框架，我们提供了 modifyGetInitialPropsCtx 方法，由插件或应用来扩展 ctx 参数，以 dva 为例：

然后在页面中，可以获取到 store ：

同时也可以在自身应用中进行扩展：

同时可以使用 getInitialPropsCtx 将服务端参数扩展到 ctx 中，例如：

在使用的时候，就有 req 对象，不过需要注意的是，只在服务端执行时才有此参数：

则在执行 getInitialProps 方法时，除了以上两个固定参数外，还会获取到 title 和 store 参数。

关于 getInitialProps 执行逻辑和时机，需要注意：

执行 umi build ，除了正常的 umi.js 外，会多一个服务端文件： umi.server.js （相当于服务端入口文件）。然后在后端框架中，引用该文件：

render 方法参数和返回值如下：

完美兼容客户端动态加载，配置如下：

@umijs/preset-react 插件集中已内置对标题的渲染，通过以下步骤使用：

@umijs/preset-react 插件集中已内置 dva

这时候 getInitialProps(ctx) 中的 ctx 就会有 store 属性，可执行 dispatch ，并返回初始化数据。

Umi 同时支持对服务端和客户端包大小的分析

---