You need to enable JavaScript to run this app.
导航
API 详情
最近更新时间:2024.07.20 09:41:23首次发布时间:2024.07.20 09:41:23

exportInitScript()

在 SSR(服务端渲染)场景下应用同层渲染时,用于生成首屏数据。该函数需配合 Hybrid 加载组件使用,生成触发同层渲染逻辑的 JS 字符串。最后将生成的 JS 字符串以 <script> 标签的形式插入到 HTML 模板中。

类型

() => string

返回值

string 用于插入的 script 内容

示例

// 以下 demo 描述了 SSR 场景下的使用流程,请您根据业务实际情况进行配置
import { exportInitScript } from '@volcengine/imagex-hybrid-react';
app.get('/', (req, res) => {
  // 1. 业务组件渲染成初始 HTML
  let domContent = renderToString(<Home />);
  // 2. 导出用于初始化的 script 字符串
  const script = exportInitScript();
  // 3. 拼接生成完整的 HTML 结构
  let html = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>react-ssr</title>
        <script>${script}</script>
      </head>
      <body>
        <div id="root">${domContent}</div>
        <script src="/client.js"></script>
      </body>
    </html>
    `;
  // 4. 响应客户端请求
  res.send(html);
});