深入理解 SSR、SPA、SSG
Nuxt3同时具备 SSR、SPA、SSG 三种不同的渲染模式,以便适应不同的需求。下面是这三种渲染模式的详解。
SSR(服务端渲染)
SSR(Server Side Rendering)指的是在服务器端生成 HTML 文件,并将其发送给浏览器进行展示,这样可以极大的提高页面的首屏渲染速度和 SEO 优化效果。Nuxt.js 提供了一套完整灵活的 SSR 架构,因此可以使用 Nuxt.js 来快速搭建 SSR 应用。
为了实现 SSR,我们需要做两件事情。首先,在 nuxt.config.js
文件中进行相关的设置,以便告诉 Nuxt.js 我们希望使用 SSR 模式进行渲染;其次,在 pages 文件夹下编写相应的页面组件代码,以便生成对应的视图文件,在 SSR 时能够被服务器端渲染。
配置步骤
在 nuxt.config.js
文件中,我们可以通过设置 ssr
选项来开启 SSR。例如:
export default {ssr: true
}
通过上述设置,Nuxt.js 会自动帮我们运行一台 Node.js 服务器,在服务端拼接组件代码并输出 HTML 文件,最后将文件返回给客户端。此时,我们就成功地实现了 SSR 模式。
部署步骤
要部署 SSR 应用,我们需要将生成的静态文件上传到服务器上,然后运行一段 Node.js 代码以便生成动态内容。具体来说,我们可以借助以下命令进行上传:
npm run build
npm run preview
其中,npm run build
用于生成静态文件,npm run preview
可以预览我们打包生成的项目。
SPA(单页面应用)
SPA(Single Page Application)指的是一种在浏览器端使用 Ajax 技术来实现无刷新页面更新的应用模式,这样可以提高用户在应用中的交互体验,同时也便于对用户的行为进行追踪和数据收集。
Nuxt3 支持使用 SPA 渲染模式进行开发。在这种模式下,Nuxt.js 会将所有的路由生成在前端,然后使用 Vue Router 进行导航控制,从而实现单页面应用的效果。
配置步骤
开启 SPA 模式非常简单,我们只需要将 ssr
选项设置为 false
即可。例如:
export default {ssr: false
}
在开启 SPA 模式时,我们需要编写页面组件代码,并在其中使用 Vue Router 进行页面跳转和组件渲染。此时,我们可以使用 nuxt-link
组件来进行路由跳转。例如:
<template><div><h1>Hello</h1><nuxt-link to="/about">About</nuxt-link></div>
</template>
在上述代码中,nuxt-link
组件会自动帮我们生成前端路由并进行跳转,不需要手动定义路由表或者设置跳转路径,这极大地提高了开发效率。
部署步骤
SPA 应用一般不需要在服务器端进行渲染,因此我们可以直接将生成的静态文件上传到服务器上,并用 Apache、Nginx 等服务器进行部署。在真实场景中,我们可能还需要对静态文件进行优化,以便提高页面加载速度和用户体验。
SSG(静态站点生成)
Nuxt3支持使用 SSG 渲染模式进行开发。在这种模式下,Nuxt.js 会将所有组件预先编译成静态文件,并将其存储在磁盘中。当用户访问网站时,Nuxt.js 会直接从磁盘中读取静态文件,并将其发送给客户端进行展示。这样可以大幅度提升应用的性能和速度。
配置步骤
将 ssr
选项设置为 true
。例如:
export default {ssr: true
}
运行打包命令
yarn generate
这样就能生成一个静态资源的网站。
使用pm2部署nuxt 应用
PM2 是 Node.js 应用程序的生产过程管理器,提供了进程管理、日志记录、开机自启、自动重启等多种功能,可以非常方便地部署和管理 Nuxt.js 3 应用。下面是 PM2 部署 Nuxt.js 3 应用的步骤。
步骤一:安装 PM2
在开始之前,我们先来安装 PM2。
npm install pm2 -g
步骤二:生成打包文件
在部署之前,我们需要先生成打包文件。
npm run build
该命令将会生成应用的静态文件,存储在 .nuxt
目录下。
步骤三:创建 PM2 进程
创建 PM2 进程的步骤如下:
- 在应用根目录下,创建一个
ecosystem.config.js
文件。
module.exports = {apps: [{name: "nuxt-app",script: "npm",args: "start"}]
}
-
在这个文件中,我们定义了一个名为
nuxt-app
的应用进程,对应的启动命令是npm start
。 -
输入以下命令以启动 PM2。
pm2 start ecosystem.config.js
- 运行以下命令以启动开机自启:
pm2 save
- 运行以下命令以查看应用状态:
pm2 list
步骤四:部署应用
部署应用非常简单。只需要将应用上传到服务器上,然后在服务器上运行 npm run build
以及上述 PM2 命令即可。
pm2 start ecosystem.config.js
pm2 save
如果应用需要更新,只需要重新生成静态文件,然后通过 PM2 重启即可。
# 重新生成静态文件
npm run build# 重启 PM2 进程
pm2 restart ecosystem.config.js
至此,Nuxt3 应用的部署就完成了,我们可以通过域名访问部署好的应用。