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选择：

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

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

上一篇

SPA首屏加载速度慢的问题?

下一篇

Vercel网站部署流程