指南
指南

客户端渲染

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

src/entry.server.ts

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

// 这里必须使用 import type，否则开发阶段会报错
import type { RenderContext } from '@gez/core';

export default async (rc: RenderContext) => {
    // 获取注入的代码
    const script = await rc.script();
    const time = new Date().toISOString();
    rc.html = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gez</title>
</head>
<body>
    <div #id="app"></div>
    ${script}
</body>
</html>
`;
};

src/entry.node.ts

  • 在 postCompileProdHook 钩子中，手动执行一次 SSR 渲染，将生成的 HTML 写入到 dist/client/index.html 文件中。
  • 将 dist/client/ 目录复制到你的服务器上。
import path from 'node:path';
import type { GezOptions } from '@gez/core';

export default {
    // ... 其它选项
    async postCompileProdHook(gez) {
        const render = await gez.render({
            params: {
                url: req.url
            }
        });
        gez.write(
            path.resolve(gez.getProjectPath('dist/client'), 'index.html'),
            render.html
        );
    }
} satisfies GezOptions;
TIP

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