logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 命令
      文件约定
      src/
      App.[tj]sx
      entry.[tj]s
      entry.server.[tj]sx
      modern.runtime.[tj]s
      routes/
      *.[server|node].[tj]sx
      api/
      lambda/*.[tj]s
      server/
      modern.server.[tj]s
      shared/
      config/
      html/
      favicon.*
      icon.*
      mock/
      public/
      upload/
      modern.config.[tj]s
      运行时
      Core
      createRoot
      render
      Router
      router
      SSR
      NoSSR
      renderStreaming
      renderString
      createRequestHandler
      BFF
      useHonoContext
      Utility
      CSS-In-JS API
      Head
      loadable
      📝 编辑此页面
      上一页renderStreaming下一页createRequestHandler

      #renderString

      用于 React String SSR 渲染出字符串,配合 createRequestHandler 使用

      #使用

      src/entry.server.tsx
      import {
        renderString,
        createRequestHandler,
      } from '@modern-js/runtime/ssr/server';
      
      const handleRequest = async (request, ServerRoot, options) => {
        const body = await renderString(request, <ServerRoot />, options);
      
        return new Response(body, {
          headers: {
            'content-type': 'text/html; charset=utf-8',
          },
        });
      };
      
      export default createRequestHandler(handleRequest);

      #函数签名

      export type RenderString = (
        request: Request,
        serverRoot: React.ReactElement,
        optinos: RenderOptions,
      ) => Promise<string>;

      #示例

      src/entry.server.tsx
      import {
        renderString,
        createRequestHandler,
      } from '@modern-js/runtime/ssr/server';
      
      const handleRequest = async (request, ServerRoot, options) => {
        // do something before render
        const body = await renderString(request, <ServerRoot />, options);
      
        const newBody = body + '<div>Byte-Dance</div>';
      
        return new Response(newBody, {
          headers: {
            'content-type': 'text/html; charset=utf-8',
          },
        });
      };
      
      export default createRequestHandler(handleRequest);