初识Nuxt.js框架（附SSR/SPA对比）

关于SSR和SPA

服务端渲染SSR和客户端渲染SPA（单页面应用）的区别：

• SSR (Server Side Render)：最终HTML文件由服务端来生成，然后浏览器直接下载进行显示。支持SSR的框架有基于React的Next和基于Vue的Nuxt。
• SPA (Single Page Application)：浏览器下载的是整个单页面应用的相关代码（框架代码、业务代码）资源，最终HTML文件通过js代码在浏览器上生成。三大框架Angular、Vue、React均为SPA。

SSR主要解决SPA首屏渲染慢以及不利于SEO的问题，其优势为：

• 首屏渲染快。SPA会一次性下载整个单页面应用的所有代码和资源，造成首屏渲染缓慢，而SSR则对每个页面单独进行服务端渲染的HTML文件，这样访问什么页面就下载什么页面，并且由于直接下载HTML文件，文件容量相对较小，所以可以被更快地加载好，给带宽较差的访问者带来速度上的提升。
• 支持SEO。SPA在直到浏览器运行其JS代码前页面的数据是未知的，因此无法被爬虫，而SSR由于服务端直接输出HTML文件，因此可以解决这个问题。一些非最优的解决方案：如取巧地将某些需要SEO的页面进行预渲染，或者判断访问来源是爬虫时，才输出服务端渲染的html，否则输出SPA，但是这样做也有弊端比如爬虫抓取的数据可能和真实访问数据不一致等等。

SPA与SSR选择：

1. 如果采取前后端分离开发，SPA效率更高，无需后端人员操心前端内容。相反，如果采用SSR，则需要后端人员也对前端的技能有一定掌握，并且前端人员做好页面后需要由后端人员来进行修改。
2. 如果对SEO有需求，可采用SSR的方法。

总结：若无SEO需求，且前后端分离开发，首选还是SPA。而在需要加速首屏渲染时，可以采用SSR的方法或者webpack的方法等等。若需要SEO，则采用SSR或对部分页面预渲染的方法。Nuxt是一个Node程序，这是由于我们要把Vue在服务端上运行，需要Node环境。当我们访问Nuxt应用时，实际上在访问Node程序的路由，程序输出为首屏渲染内容+用于重新渲染的SPA的脚本代码。其中，路由是由Nuxt中定义好的pages文件夹来生成。
 
 

关于NUXTJS

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

NUXTJS的三种渲染特性（摘自官网描述）：

1. 服务端渲染（SSR）：这是 Nuxt 最受欢迎的模式。利用 SSR（也叫做 “universal” or “isomorphic” 模式），Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端，而不是纯 javascript。与传统的 Vue SPA 相比，使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。因为由开发者独立实现 SSR 将会非常繁琐，Nuxt.js 对此提供了开箱即用的全面支持， 并帮你规避常见的陷阱。
2. 生成静态站点：生成静态站点是现在的一个热门话题（也叫做 JAMStack）。与其换一个框架并花时间去适应它，为什么不一石二鸟呢？Nuxt.js 支持基于 Vue 应用程序生成静态站点。这是“两全其美”的， 因为你不要服务器，但是仍能获得 SEO 的好处，这是因为 Nuxt 将预先渲染所有页面，并且包括必要的 HTML。此外，你可以轻松地将生成的页面部署到 Netlify 或 GitHub pages 上。
3. 单页面应用（SPA）：不需要 SSR 或生成静态站点，但仍希望从 Nuxt 提供的好处中获益？你是否正在慢慢转换你的应用程序并希望起步阶段是轻量的？那么传统的 SPA 模式更适合你。 最终你将获得一个你所熟悉的典型的 Vue SPA，但会受到 Nuxt 配置和框架本身的影响。

总结：Nuxt是一个在Vue基础上的支持SSR和预渲染的框架，当无需考虑SSR和预渲染的问题时，可以采用Nuxt的SPA模式来开发传统的Vue SPA，这样可以享受Nuxt在Vue之上优化过的便利。而当不想使用服务器时，可以采用Nuxt的静态化（预渲染），这样可以把应用静态化后部署在CDN，从而实现一个无服务端的自动静态化的Web应用。

 
 
参考
[1] nuxtjs官网
[2] 什么是服务端渲染、客户端渲染、SPA、预渲染，看完这一篇就够了
[3] 浅析SSR(服务端渲染)和SPA(客户端渲染)
[4] 实现基于 Nuxt.js 的 SSR 应用