指南
API
指南
API

客户端渲染

如果在生产环境，无法部署一个 Node 实例，可以在构建阶段就生成客户端渲染的 index.html 文件。

客户端模板

在服务渲染时，返回一个通用的模板即可。

src/entry.server.ts
1import type { RenderContext } from '@gez/core';
2
3export default async (rc: RenderContext) => {
4    // 提交依赖收集
5    await rc.commit();
6    // 响应 HTML
7    rc.html = `
8<!DOCTYPE html>
9<html>
10<head>
11    ${rc.preload()}
12    <title>Gez</title>
13    ${rc.css()}
14</head>
15<body>
16    <div id="app"></div>
17    ${rc.importmap()}
18    ${rc.moduleEntry()}
19    ${rc.modulePreload()}
20</body>
21</html>
22`;
23};

构建时生成 index.html

  • 在 postCompileProdHook 钩子中，手动执行一次 SSR 渲染，将生成的 HTML 写入到 dist/client/index.html 文件中。
  • 将 dist/client/ 目录复制到你的服务器上。
src/entry.node.ts
1import path from 'node:path';
2import type { GezOptions } from '@gez/core';
3
4export default {
5    // ... 其它选项
6    async postCompileProdHook(gez) {
7        const render = await gez.render({
8            params: {
9                url: '/'
10            }
11        });
12        gez.writeSync(
13            gez.resolvePath('dist/client', url.substring(1), 'index.html'),
14            rc.html
15        );
16    }
17} satisfies GezOptions;
TIP

postCompileProdHook 钩子会在构建完成后，以生产模式执行构建出来的代码。如果你要生成一个完全静态的网站，也可以在这里实现。