【前端知识梳理】SPA Vs SSR

SPA(Single Page Application)

即 单页面应用，一般也称为 客户端渲染（Client Side Render），简称CSR。

SPA优缺点

SPA应用只会首次请求HTML文件，后续只需要请求json数据即可。

优点：

• 用户体验更好
• 节约流量
• 服务端压力较小

缺点：

• 首屏加载的时间会变长
• SEO（搜索引擎优化）不友好

SPA工作原理

SSR(Server Side Render)

即 服务端渲染，一般也称为 多页面应用（Multiple Page Application），简称MPA

SSR优缺点

为了解决上面SPA的缺点，就诞生出了SSR的解决方案，HTML内容在服务器一次性生成出来。

优点：

• 首屏加载快
• SEO方便抓取页面信息

缺点：

• 性能 / 开发受限等问题

SSR 工作原理

方案选择

• 如果应用存在首屏加载优化需求，SEO需求时候，考虑SSR
• 如果对一些不常变化的静态网站，适合选择SPA模式 + 预渲染（prerender）方案。
• nuxt.js / next.js中给我们提供了SSG（Static Site Generate）静态网站生成方案