服务端渲染

摘抄自：有必要使用服务器端渲染(SSR)吗？ - justjavac 的回答 - 知乎 (opens new window)

了解 SSR

先引入一些概念：

• 数据：通常来自数据库，或者第三方服务等，比如用户的信息，订单详情等。数据使用某些数据结构来存储和传输，例如 json，xml，数组，Map 等。
• 模板：一个页面的基本轮廓和展示，模板定义了某个元素在什么位置显示。比如 PHP/JSP 就是模板语言，还有很多的模板引擎包括 Smarty/JSX 等。
• 页面：为了简化后面的说明，我们就把页面狭义的定义为 HTML。

再引入一个公式：

页面 = 模板 + 数据

其中加号指的是渲染

• 服务端渲染：渲染过程在服务端完成，最终的渲染结果 HTML 页面通过 HTTP 协议发送给客户端。对于客户端而言，只是看到了最终的 HTML 页面，看不到数据，也看不到模板。

• 客户端渲染：服务端把模板和数据发送给客户端，渲染过程在客户端完成。

• 服务端渲染的优势：SEO 友好，首屏加载快。首屏页面的模板和数据都是直接在服务端拿到然后渲染的，相比客户端渲染省去了模板和数据的网络传输的过程。以 vue 或者 react 举例，客户端渲染都需要在请求到 index.html 后再去请求加载 boundle.js，加载框架 js 执行代码，然后请求数据的 js 然后填充数据等等。这些都是相对比较耗时的。

• 服务端渲染的劣势：渲染在后端完成，需要耗费后端资源；费流量，即使局部页面的变化也需要重新发送整个页面，等等。

• 客户端渲染的优势：节省后端资源，局部刷新页面，多端渲染，前后端分离。

• 客户端渲染的劣势：首屏性能差，白屏，无法（或者很难进行）SEO，等等。

所以，可以看出，服务端渲染的优势就是客户端的劣势，服务端的劣势就是客户端的优势。

Next.js
Next.js 做的是同构渲染。同一套代码既可以在服务端渲染，也可以在客户端渲染。

当我们首次访问时，也就是访问首屏时，Next.js 使用服务端渲染，为我们返回已经渲染完成的最终 HTML 页面。这样就同时解决了首屏白屏问题以及 SEO 问题，此后当我们再进行交互时，则使用客户端渲染。HTML、CSS、JS 等资源都不需要再重新请求，只需要通过 ajax/websocket 等途径获取数据，在客户端完成。