当前位置：首页 > news >正文

nest.js集成服务端渲染（SSR）

news 2025/9/19 5:30:47

h5打开以查看

最常用的组合是使用 @nestjs/platform-express（或 fastify）配合一个模板引擎，如 Handlebars, EJS, Pug 等。

下面我将以最经典的 Express + Handlebars (HBS) 为例，详细讲解如何在 NestJS 中设置并返回动态页面。

步骤一：安装所需依赖

首先，你需要安装 NestJS 的 Express 平台（通常默认就有）和 Handlebars 引擎。

bash

npm install @nestjs/platform-express
npm install hbs

步骤二：配置模板引擎

你需要告诉 NestJS 在哪里查找模板文件以及使用哪种引擎。这通常在 main.ts 文件中通过配置 NestExpressApplication 来完成。

src/main.ts

typescript

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';async function bootstrap() {// 创建应用，并指定使用 Express 平台const app = await NestFactory.create<NestExpressApplication>(AppModule);// 配置静态资源目录 (可选，用于存放 CSS, JS, images)app.useStaticAssets(join(__dirname, '..', 'public'));// 设置视图文件的基础目录app.setBaseViewsDir(join(__dirname, '..', 'views'));// 注册模板引擎为 'hbs'app.setViewEngine('hbs');await app.listen(3000);
}
bootstrap();

关键配置解释：

useStaticAssets: 设置静态文件目录（如 public 文件夹），浏览器可以直接访问这里的文件。
setBaseViewsDir: 设置模板文件（.hbs 文件）存放的根目录（如 views 文件夹）。
setViewEngine: 设置要使用的视图引擎，这里设置为 'hbs'。

步骤三：创建模板文件 (.hbs)

在项目根目录下创建 views 文件夹，然后在此文件夹中创建你的模板文件。

示例 1：基础布局页面 (views/layout.hbs)

handlebars

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>{{title}}</title><link rel="stylesheet" href="/style.css"> {{!-- 引用 public 目录下的静态文件 --}}
</head>
<body>{{{body}}} {{!-- 这是一个占位符，其他模板的内容会渲染在这里 --}}
</body>
</html>

示例 2：首页模板 (views/index.hbs)

handlebars

<h1>Welcome, {{userName}}!</h1>
<p>Current time: {{time}}</p>
<ul>{{#each items}}<li>{{this.name}}</li>{{/each}}
</ul>

示例 3：关于页面模板 (views/about.hbs)

handlebars

<h1>About Us</h1>
<p>This is a dynamic about page rendered on the server.</p>

步骤四：在控制器中渲染并返回页面

在你的控制器中，你不再使用 @Get() 处理程序返回 JSON，而是使用 res.render() 方法。

src/app.controller.ts

typescript

import { Controller, Get, Res } from '@nestjs/common';
import { Response } from 'express'; // 注意：要导入 Express 的 Response 类型
import { AppService } from './app.service';@Controller()
export class AppController {constructor(private readonly appService: AppService) {}// 使用 @Res() 装饰器注入 Response 对象@Get()index(@Res() res: Response) {// 使用 res.render() 方法渲染模板// 第一个参数: 模板文件名（相对于 views 目录的路径，无需扩展名）// 第二个参数: 传递给模板的数据对象res.render('index', {title: 'Home Page',userName: 'NestJS User',time: new Date().toLocaleTimeString(),items: [{ name: 'Item 1' },{ name: 'Item 2' },{ name: 'Item 3' },]});}@Get('about')about(@Res() res: Response) {res.render('about', {title: 'About Us'});}
}

关键点：

注入 @Res()：为了使用 Express 原生的 response 对象，你需要注入 @Res() 装饰器。
res.render(): 这是渲染视图的核心方法。它接收模板名称和一个包含动态数据的对象。
不要混用 @Res() 和标准响应方式：一旦你使用了 @Res()，你就接管了响应，NestJS 的标准（基于返回值）响应处理就不再生效。你需要手动调用 res.render(), res.send(), res.json() 等方法。

使用其他模板引擎

流程完全一样，只需安装对应的引擎包并在 main.ts 中更改配置即可。

1. 使用 EJS：

bash

npm install ejs

main.ts 配置：

typescript

app.setViewEngine('ejs');

2. 使用 Pug (Jade)：

bash

npm install pug

main.ts 配置：

typescript

app.setViewEngine('pug');

总结

在 NestJS 中返回动态页面的核心步骤是：

安装依赖：模板引擎包（如 hbs, ejs）。
配置应用：在 main.ts 中设置静态资源目录、视图目录和视图引擎。
创建模板：在 views 目录下编写模板文件（.hbs, .ejs 等）。
渲染响应：在控制器中注入 @Res()，并使用 res.render(templateName, data) 来渲染模板并将生成的 HTML 发送给客户端。