Nuxt SSR如何从零开始学习，有哪些关键小结？

本文共计2315个文字，预计阅读时间需要10分钟。

Nuxt.js 是一个基于 Vue.js 开发的应用框架，常用于实现 SSR（服务器端渲染）。SSR 是一种提升网页加载速度和SEO表现的技术。相对的，CSR（客户端渲染）则是常见的网页开发方式。从 JSP、PHP 等传统技术转向现代框架如 Angular、React，网页开发经历了从 CSR 到 SSR 的演变。

nuxt 是基于 vue 开发的一个应用框架，最常用的就是拿来做 ssr。那么什么是 ssr 呢，这就要提及一个相对的概念：csr。

CSR & SSR

web网页开发从之前的 jsp，php 转向现在的三大框架 angular react vue，其实就是从 csr 到 ssr 的转变，即从服务端渲染转而变为客户端渲染。

有使用经验的大概知道，例如之前的 php 开发，是将网页内容和服务端代码逻辑写在一起的，在客户端请求时，服务端经过 php 引擎的渲染生成完整的 html 页面再返回给客户端，这种渲染出的页面在浏览器中右键查看源代码都是能看见 页面全部的 html 代码的。而客户端渲染如 vue，返回的就只有一个挂在 app 节点的 html文件和一个 js 文件，页面的内容都是在客户端的 js 渲染生成的。所以 渲染 html 文本所在的位置就是 CSR（客户端渲染） 和 SSR（服务端渲染） 最本质的区分 。

既然web开发从 ssr 过渡到了 csr，那我们为什么又再去做 ssr 呢，这就要涉及到双方的优缺了：

SSR：

优点：

便于 SEO，渲染完整的 html 更利于搜索引擎的抓取。

页面加载的白屏时间短（几乎没有）。