Vue-SPA与SSR的区别及Vue中的SSR搭建

最新推荐文章于 2026-05-07 09:30:20 发布

原创最新推荐文章于 2026-05-07 09:30:20 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

1.SPA与SSR的区别

Vue中单页应用程序 (Single-Page Application) vs 服务器端渲染(Server Side Rendering)

	SPA单页应用程序	SSR服务器端渲染
优势	1.页面内容在客户端渲染 2. 只关注View层，与后台耦合度低，前后端分离 3.减轻后台渲染画面的压力	1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面
劣势	1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好	1.更多的服务器端负载 2.涉及构建设置和部署的更多要求，需要用Node.js渲染 3.开发条件有限制，一些生命周期将失效 4.一些常用的浏览器API无法使用

注：
服务器端渲染会先向后端请求数据，生成完整首屏HTML后返回给客户端
客户端渲染会等待JS下载，解析完之后再向服务器请求数据，等待过程中是什么也没有的，所以会出现首屏白页的情况。

由服务器端请求首屏数据而不是客户端请求首屏数据，服务器端在内网进行请求，速度更快。但是客户端处于不同的网络环境，在客户端渲染会导致时间差。

SSR最主要的使用场景是面向用户，无论是SEO优化还是提高首屏加载的速度，都是为了让它在网络上有更好的表现；但如果是要做一个企业级的内部管理系统或者一个管理后台，SPA就可以了。具体如何选择，主要还得看实际的需求。
SSR中服务器端在内网进行请求，速度更快。但是客户端处于不同的网络环境，导致时间差。

2.SSR的实现

目前Vue SSR的实现有两种实现，一种是基于官方Vue SSR指南文档的官方方案，一种是vue.js通用应用框架–NUXT。官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。而NUXT提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。

1.基于官方Vue SSR

Vue官方SSR文档点击此处：Vue SSR官方文档
一个Bilibili教学视频：手把手教你打造Vue SSR

2.Nuxt.js

Nuxt官方文档点击此处：Nuxt的官方文档
使用Nuxt搭建SSR的方式比较方便。
安装脚手架以后，使用如下命令初始化一个Nuxt.js项目

vue init nuxt-community/starter-template
#或者
vue init nuxt/starter

此后

npm install

接着

npm run dev

在localhost:3000下看到此画面则Nuxt项目安装成功
在这里插入图片描述
Nuxt的目录结构如下：

目录与相关文件功能介绍：

目录名	目录名称	目录功能
assets	资源目录	用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
components	组件目录	用于组织应用的 Vue.js 组件
layouts	布局目录	用于组织应用的布局组件
middleware	中间件目录	用于存放应用的中间件
pages	页面目录	用于组织应用的路由及视图注：Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置
plugins	插件目录	用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件
static	静态文件目录	用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理
store	Store 目录	用于组织应用的 Vuex 状态树文件
nuxt.config.js	文件	用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置
package.json	文件	用于描述应用的依赖关系和对外暴露的脚本接口