🔴vue用Nuxt.js实现SSR

说在前面

SSR 的实现方式

在前端开发中，常见的 SSR 实现方式包括：

1. 使用框架：

   • Vue.js 的 Nuxt.js
   • React 的 Next.js
   • Angular 的 Angular Universal

使用 Nuxt.js 实现 SSR（服务器端渲染）时，前端和后端的分工如下：

• 前端：使用 Nuxt.js 框架开发应用，Nuxt.js 会自动处理 SSR 的逻辑。
• 后端：提供一个 Node.js 服务器来运行 Nuxt.js 应用，或者将 Nuxt.js 应用构建为静态文件并托管到任何静态服务器。

下面是一个完整的例子，展示如何使用 Nuxt.js 实现 SSR，并提供一个简单的 Node.js 后端服务器。

---

实操

1. 前端：使用 Nuxt.js 实现 SSR

步骤 1：创建 Nuxt.js 项目

使用以下命令创建一个新的 Nuxt.js 项目：

npx create-nuxt-app my-nuxt-app

在创建过程中，选择以下配置：

• 编程语言：JavaScript 或 TypeScript
• 渲染模式：Universal (SSR)
• 其他选项根据需求选择。

步骤 2：编写页面

在 pages/ 目录下创建页面文件。例如，创建 pages/index.vue：

<template>
  <div>
    <h1>Hello, Nuxt.js SSR!</h1>
    <p>Current time: {{ time }}</p>
  </div>
</template>

<script>
export default {
  async asyncData() {
    // 模拟异步数据获取
    const time = new Date().toLocaleString();
    return { time };
  }
};
</script>

步骤 3：运行开发服务器

在项目根目录下运行以下命令启动开发服务器：

npm run dev

访问 http://localhost:3000，你会看到页面已经通过 SSR 渲染，并且显示了服务器端生成的时间。

---

2. 后端：提供 Node.js 服务器

Nuxt.js 本身已经内置了一个 Node.js 服务器，但你可以自定义后端服务器来运行 Nuxt.js 应用。

步骤 1：安装依赖

在项目根目录下安装 express（一个 Node.js 框架）：

npm install express

步骤 2：创建自定义服务器

在项目根目录下创建一个 server/index.js 文件，编写以下代码：

const express = require('express');
const { Nuxt, Builder } = require('nuxt');

const app = express();
const port = process.env.PORT || 3000;

// 导入 Nuxt.js 配置
const config = require('../nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';

async function start() {
  // 初始化 Nuxt.js
  const nuxt = new Nuxt(config);

  // 开发模式下启用热更新
  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build();
  } else {
    await nuxt.ready();
  }

  // 使用 Nuxt.js 渲染路由
  app.use(nuxt.render);

  // 启动服务器
  app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
  });
}

start();

步骤 3：修改 package.json

在 package.json 中修改启动脚本：

{
  "scripts": {
    "dev": "node server/index.js",
    "build": "nuxt build",
    "start": "NODE_ENV=production node server/index.js"
  }
}

步骤 4：运行项目

• 开发模式：

  npm run dev
  

• 生产模式：

  npm run build
  npm run start
  

访问 http://localhost:3000，你会看到页面通过 SSR 渲染，并且后端服务器正常运行。

---

3. 后端 API 示例

如果你的应用需要从后端 API 获取数据，可以在后端提供一个简单的 API。

步骤 1：添加 API 路由

在 server/index.js 中添加一个简单的 API 路由：

app.get('/api/time', (req, res) => {
  const time = new Date().toLocaleString();
  res.json({ time });
});

步骤 2：在页面中调用 API

修改 pages/index.vue，使用 axios 调用后端 API：

<template>
  <div>
    <h1>Hello, Nuxt.js SSR!</h1>
    <p>Current time from API: {{ apiTime }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  async asyncData() {
    // 调用后端 API
    const { data } = await axios.get('http://localhost:3000/api/time');
    return { apiTime: data.time };
  }
};
</script>

步骤 3：安装 axios

在项目中安装 axios：

npm install axios

步骤 4：运行项目

重新启动项目，访问 http://localhost:3000，你会看到页面通过 SSR 渲染，并且显示了从后端 API 获取的时间。

---

4. 部署

部署到 Node.js 服务器

将代码部署到支持 Node.js 的服务器（如 AWS、Heroku、DigitalOcean 等），运行以下命令：

npm run build
npm run start

部署为静态文件

如果你不需要动态 SSR，可以将 Nuxt.js 应用构建为静态文件：

npm run generate

然后将生成的 dist/ 目录部署到任何静态服务器（如 Nginx、Netlify、Vercel 等）。

---

总结

通过 Nuxt.js，你可以轻松实现 SSR，并且可以自定义后端服务器来处理 API 请求。以下是一个完整的项目结构示例：

my-nuxt-app/
├── assets/
├── components/
├── layouts/
├── pages/
│   └── index.vue
├── server/
│   └── index.js
├── nuxt.config.js
├── package.json
└── ...

希望这个例子能帮助你理解如何使用 Nuxt.js 实现 SSR，并搭建一个完整的全栈应用！