Nuxt3学习总结（6）

叶落风尘
1,580 阅读4分钟

深入理解 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 进程的步骤如下：

  1. 在应用根目录下，创建一个 ecosystem.config.js 文件。
module.exports = {
  apps: [
    {
      name: "nuxt-app",
      script: "npm",
      args: "start"
    }
  ]
}

  1. 在这个文件中，我们定义了一个名为 nuxt-app 的应用进程，对应的启动命令是 npm start 。

  2. 输入以下命令以启动 PM2。

pm2 start ecosystem.config.js
  1. 运行以下命令以启动开机自启：
pm2 save
  1. 运行以下命令以查看应用状态：
pm2 list

步骤四：部署应用

部署应用非常简单。只需要将应用上传到服务器上，然后在服务器上运行 npm run build 以及上述 PM2 命令即可。

pm2 start ecosystem.config.js
pm2 save

如果应用需要更新，只需要重新生成静态文件，然后通过 PM2 重启即可。

# 重新生成静态文件
npm run build

# 重启 PM2 进程
pm2 restart ecosystem.config.js

至此，Nuxt3 应用的部署就完成了，我们可以通过域名访问部署好的应用。

avatar
文章
阅读
粉丝