目前为止接触的项目开发均是前后端分离模式，前端利用从后台获取的数据渲染到页面上。之前用的基本都是客户端渲染，最近接触了服务端渲染。
我到目前为止接触的项目开发均是前后端分离模式，前端利用从后台获取的数据渲染到页面上。之前用的基本都是客户端渲染，最近接触了服务端渲染。
最近的开发使用了Next.js，Next是一个轻量级的React服务端渲染应用框架 。一直不是很清楚服务端渲染（server side render）和客户端（client side render）渲染的具体实现，于是网上搜罗了一番，下面简单记录一下。
一. 客户端渲染（CSR）
客户端发起页面请求，服务端把页面（响应的字符串）发送给客户端，客户端从上到下依次解析，解析过程中，发现网络请求，再次向服务器发送网络请求，客服端拿到响应的结果，模板引擎渲染到HTML页面。
优点：灵活，真正的前后端分离，方便于前后台各自更新维护。
缺点: 对SEO不友好，增加了HTTP请求的次数，减缓了页面加载速度。
二. 服务端渲染（SSR）
在后端看来，页面文件其实就是一个“字符串”，所以服务端完全可以在获取到HTML文件的内容之后经过一些处理再返回给客户端，也就说，服务端可以将数据插入到HTML 字符串中之后再返回给客户端
优点：对 SEO搜索引擎友好，减少了HTTP请求的次数，加速了页面初次渲染的速度
缺点：不灵活，前后端耦合太深。
在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和 html内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求肯定是要比在浏览器端效率要高的多。
服务端渲染和客户端渲染结合
网站的流量来源主要还是靠搜索引擎，所以网站的 SEO 还是很重要的，而客户端渲染模式对搜索引擎不够友好，要想彻底解决这个问题只能采用服务端渲染。
最好的方案就是服务端渲染和客户端渲染的结合，第一次访问页面是服务端渲染，基于第一次访问后续的交互就是客户端渲染的效果和体验，同时还不影响SEO效果。
Next.js 中的服务端渲染和客户端渲染
getiInitialProps 是 Next.js 最伟大的发明，它确定了一个规范，一个页面组件只要把访问 API 外部资源的代码放在 getInitialProps 中就足够，其余的不用管，Next.js 自然会在服务器端或者浏览器端调用 getInitialProps 来获取外部资源，并把外部资源以 props 的方式传递给页面组件。
getInitialProps()是可以在服务端运行的，当页面第一次加载时，服务器收到请求，getInitialProps()会执行，getInitialProps()返回的数据，会序列化后添加到 window.__NEXT_DATA__.props上，写入HTML源码里，类似于。这样服务端的getInitialProps()就实现了把数据传送给了客户端。当我们通过Next.js的路由Link来进行页面跳转的时候，客户端就会从window.__NEXT_DATA__里获取数据渲染页面，就无需重新获取数据。