前言
本篇文章将带你了解究竟什么是 SSR, 并且用实际例子比对 SSR 与 CSR，让你更深刻的了解这两者的区别。在文章末尾还介绍了 Nuxt.js 的使用及 SSG 是什么，相信对这些不够了解的同学看完本篇文章都能有所收获。
什么是 SSR
SSR（Server-side Rendering）服务端渲染
SSR 全称为 Server-side Rendering，也就是我们常说的服务端渲染，html 页面需要经过服务端渲染之后输出给客户端。
在了解 SSR 之前，我们需要先了解一下我们更为常用的 CSR。
CSR（Client-side Rendering）客户端渲染
由服务端返回初始的html 页面，由 JS 去异步加载数据，再完成页面的渲染。
SSR vs CSR
我们可以通过淘宝提供的这两个链接来沉浸式体验 SSR/CSR 的区别
SSR Demo 地址：rax-demo.now.sh/ssr/home
CSR Demo 地址：rax-demo.now.sh/csr/home
CSR 渲染的页面，只有一个 html 框架，引入了一些 js 用于在客户端去异步加载数据渲染最终的 html 页面。
而 SSR 渲染的页面，把整体的页面框架及数据结构都渲染好了，整体的页面都返回给到了浏览器。
通过下面这个页面加载时序图的对比，我们可以发现，CSR 是请求到 html 框架之后，有一个通过 JS bundle来组装的过程，才展现了最终的页面，而SSR请求到的资源直接就是组装好的 html 页面。很明显，SSR 的页面首次加载速度更快，体验更好。
SSR/CSR 优缺点比对
综上可以看到，SSR、CSR都是各有利弊的，可以根据自己的需要来选择相应的技术方案。
SPA(single page web application)
提到SSR，我们就不得不提到如今比较风靡的单页应用 SPA ，它是一种网络应用程序或网站的模型。通过动态重写 (根据需要动态装载适当的资源) 当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验。
单页应用的主要实现逻辑如下：
- 监听地址栏中
hash变化驱动界面变化 - 用
pushsate记录浏览器的历史，驱动界面发送变化
SPA 是局部刷新的，所以页面切换速度比较快，数据传递也比较容易。但是由于SPA的资源都是动态加载的，像一个个积木一样动态添加或减少，这并不利于搜索引擎的抓取，而且首次渲染速度相对较慢。
一些我们熟知的 JS 框架如 react , vue , angular , ember 等都属于 SPA。如果要想要改进SEO，一个重要的方式就是需要进行SSR。那怎么来进行SSR 呢？以下将介绍一下 Nuxt.js 来实现 SSR 的过程。
Nuxt 实现 SSR
2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。
Nuxt是一个免费且开源的框架，它提供了一种直观且可扩展的方式来创建类型安全、高性能和生产级别的全栈Web应用和网站，使用的是Vue.js。从一开始就可以编写 .vue文件，同时在开发中享受到热模块替换的便利，并在生产中获得高性能的应用，其中默认启用了服务器端渲染。
- 新建一个 Nuxt 项目
shell
npx nuxi@latest init <project-name>你可能会遇到下面的报错，是因为某个数据源被墙了
shell
ERROR Failed to download template from registry: fetch failed你可以采取修改本地的host文件，增加一行下面的代码之后。重新运行 npx nuxi@latest init <project-name>命令
shell
185.199.108.133 raw.githubusercontent.com此时就可以愉快的使用 Nuxt.js 了
- 运行项目
arduino
npm run dev你可能会遇到这个报错 ERROR Cannot start nuxt: The requested module 'node:module' does not provide an export named 'isBuiltin'，请升级node版本到18.18.0以上便可以解决问题。
更多使用方法请移步 安装 · 快速入门 Nuxt
由Nitro驱动
Nuxt的服务器使用的是Nitro。Nitro最初是为Nuxt创建的，但现在是UnJS的一部分，也被其他框架使用 - 甚至可以单独使用。使用Nitro可以对应用程序的服务器端部分拥有完全控制权，在任何提供者上进行通用部署（许多无需配置），这也是 Nuxt 的核心技术点。
使用 Nitro 中的 Node.js 服务器预设可以在任何 Node 托管上部署。适用于将 Nuxt 应用部署到任何 Node.js 托管上。
部署体验
想体验一下的朋友可以自己建一个项目放到 github 上面，然后结合vercel一键部署，框架预设选择 Nuxt.js ，整体流程是非常方便的，以后每次push也会自动触发构建。
vercel网址：vercel.com/
我的 github 仓库地址：github.com/strugglingl...
经 vercel 部署过后的测试链接：nuxt-test-puce-phi.vercel.app/
SSG
最后再提一下SSG，SSG即静态站点生成，又称为预渲染 。是另一种比较流行的快速构建网站的技术。非常适用于静态网站的构建，部署会比SSR更为简单，因为其全部是静态资源。
Nuxt 也支持使用 SSG，使用 npm run generate 即可预渲染静态网站，文件默认会输出到 dist 文件夹下。
后记
以上就是本篇文章的全部内容，感谢阅读，本篇文章介绍了 SSR 及 Nuxt.js 的简单使用，希望你能有所收获。如有不对的地方或者想要讨论的地方，欢迎留言交流讨论。