• 简体中文

      • 客户端渲染

      客户端渲染（Client-Side Rendering，CSR）指在浏览器端执行页面渲染。在无法部署 Node.js 服务的场景下，可在构建阶段生成静态 index.html，实现纯客户端渲染。

      使用场景

      以下场景推荐使用客户端渲染：

      • 静态托管环境：如 GitHub Pages、CDN 等不支持 SSR 的托管服务。
      • 简单应用：对首屏加载速度和 SEO 要求不高的小型应用。
      • 开发环境：在开发阶段快速预览和调试应用。

      配置说明

      HTML 模板配置

      模板应包含资源注入与入口顺序：preload、css 在 head，importmap、moduleEntry、modulePreload 在 body。

      src/entry.server.ts
      import type { RenderContext } from '@esmx/core';

export default async (rc: RenderContext) => {
    await rc.commit();
    rc.html = `
<!DOCTYPE html>
<html>
<head>
    ${rc.preload()}
    <title>Esmx</title>
    ${rc.css()}
</head>
<body>
    <div id="app"></div>
    ${rc.importmap()}
    ${rc.moduleEntry()}
    ${rc.modulePreload()}
</body>
</html>
`;
};

      静态 HTML 生成

      在构建阶段生成静态 HTML 文件，可通过 postBuild 钩子实现：

      src/entry.node.ts
      import type { EsmxOptions } from '@esmx/core';

export default {
    async postBuild(esmx) {
        const rc = await esmx.render();
        esmx.writeSync(
            esmx.resolvePath('dist/client', 'index.html'),
            rc.html
        );
    }
} satisfies EsmxOptions;