nestjs实现ssr
时间: 2024-04-28 18:18:51 浏览: 11
要使用NestJS实现服务器端渲染(SSR),你可以按照以下步骤进行操作:
1. 首先,确保你已经安装了Node.js和NestJS。如果没有安装,请先安装它们。
2. 创建一个新的NestJS应用程序。你可以使用Nest CLI命令创建一个新的Nest应用程序模板。打开终端或命令提示符,并运行以下命令:
```bash
$ nest new ssr-app
```
3. 进入新创建的应用程序目录:
```bash
$ cd ssr-app
```
4. 安装一些必要的依赖项。在这里,我们需要安装`@nestjs/express`和`react-dom/server`等依赖项,用于处理Express和React的服务器端渲染。
```bash
$ npm install @nestjs/express react react-dom react-router-dom express react-helmet axios
```
5. 创建一个React组件,用于服务器端渲染。在你的项目根目录中创建一个名为`App.tsx`的文件,并添加你的React组件代码。
```tsx
// App.tsx
import React from "react";
import { Helmet } from "react-helmet";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Home";
const App = () => {
return (
<>
<Helmet>
<title>SSR App</title>
</Helmet>
<Router>
<Switch>
<Route exact path="/" component={Home} />
</Switch>
</Router>
</>
);
};
export default App;
```
6. 创建一个NestJS控制器,用于处理服务器端渲染的请求。在你的项目根目录中创建一个名为`ssr.controller.ts`的文件,并添加以下代码:
```tsx
// ssr.controller.ts
import { Controller, Get, Res, Render } from "@nestjs/common";
import { ServerResponse } from "http";import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";
import App from "./App";
@Controller()
export class SsrController {
@Get()
@Render("index")
public async index(@Res() res: ServerResponse) {
const context = {};
const helmetContext = {};
const app = (
<StaticRouter location={req.url} context={context}>
<HelmetProvider context={helmetContext}>
<App />
</HelmetProvider>
</StaticRouter>
);
const html = renderToString(app);
const { helmet } = helmetContext;
return {
html,
helmet,
};
}
}
```
7. 修改`app.module.ts`文件,将NestJS应用程序配置为使用Express和服务器端渲染。打开`app.module.ts`文件,并添加以下代码:
```tsx
// app.module.ts
import { Module, NestModule, MiddlewareConsumer } from "@nestjs/common";
import { RenderModule } from "nest-next";
import { join } from "path";
import { SsrController } from "./ssr.controller";
@Module({
imports: [
RenderModule.forRootAsync(
// Next.js options object
{
useFactory: () => ({
viewsDir: join(process.cwd(), "dist/ssr-app/.next/server/pages"),
dev: process.env.NODE_ENV !== "production",
}),
}
),
],
controllers: [SsrController],
})
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer) {
// Add any custom middleware here
}
}
```
8. 构建和启动NestJS应用程序。运行以下命令编译你的应用程序:
```bash
$ npm run build
```
然后,运行以下命令启动应用程序:
```bash
$ npm run start
```
现在,你的NestJS应用程序应该已经实现了服务器端渲染(SSR)。当你访问根URL时,NestJS将通过服务器端渲染React组件,并将渲染后的HTML返回给客户端。