Create a React Server Components Project without NextJS - 製作一個不依賴 NextJS 的 React Server Components 專案

async function renderToHTMLOrFlightImpl(
  req: IncomingMessage,
  res: ServerResponse,
  pagePath: string,
  query: NextParsedUrlQuery,
  renderOpts: RenderOpts,
  baseCtx: AppRenderBaseContext
) {
  // 這一步是為了讓 react-server-dom-webpack 能拿到對應模組而 hack
  // We need to expose the bundled `require` API globally for
  // react-server-dom-webpack. This is a hack until we find a better way.
  if (ComponentMod.__next_app__) {
    // @ts-ignore
    globalThis.__next_require__ = ComponentMod.__next_app__.require

    // @ts-ignore
    globalThis.__next_chunk_load__ = ComponentMod.__next_app__.loadChunk
  }

  // ignore...

  const renderToStream = getTracer().wrap(
    AppRenderSpan.getBodyResult,
    {
      spanName: `render route (app) ${pagePath}`,
      attributes: {
        'next.route': pagePath,
      },
    },
    async ({
      asNotFound,
      tree,
      formState,
    }: {
      /**
       * This option is used to indicate that the page should be rendered as
       * if it was not found. When it's enabled, instead of rendering the
       * page component, it renders the not-found segment.
       *
       */
      asNotFound: boolean
      tree: LoaderTree
      formState: any
    }) => {
      // ignore...

      // 這一步入口在 createServerComponentsRenderer，得到一個經過靜態分析後，渲染用的組件
      const ServerComponentsRenderer = createServerComponentsRenderer(tree, {
        ctx,
        preinitScripts,
        options: serverComponentsRenderOpts,
      })
      // 我們要渲染的目標放進去最裡面了！！
      const children = (
        <HeadManagerContext.Provider
          value={{
            appDir: true,
            nonce,
          }}
        >
          <ServerInsertedHTMLProvider>
            <ServerComponentsRenderer asNotFound={asNotFound} />
          </ServerInsertedHTMLProvider>
        </HeadManagerContext.Provider>
      )

      // 取得 renderer
      const renderer = createStaticRenderer({
        // ignore...
      })

      try {
        // 透過 renderer 把組件轉為 HTML stream
        let { stream, postponed } = await renderer.render(children)
        // ignore...
        return stream;
      } catch {
        // ignore...
      }
    }
  );

  let formState: null | any = null
  if (actionRequestResult) {
    if (actionRequestResult.type === 'not-found') {
      const notFoundLoaderTree = createNotFoundLoaderTree(loaderTree)
      // 最終再透過 toUnchunkedString 就可以轉為 HTML string 摟
      return new RenderResult(
        // 把 html stream 丟給 RenderResult
        await renderToStream({
          asNotFound: true,
          tree: notFoundLoaderTree,
          formState,
        }),
        { ...extraRenderResultMeta }
      )
    }
  }
}

function createServerComponentsRenderer(
  loaderTreeToRender: LoaderTree,
  { ctx, preinitScripts, options }: ServerComponentsRendererOptions
) {
  // 這個函數裡面才是重點，外面這邊接收的 async function 只是一個丟進去渲染的組件
  return createServerComponentRenderer<{
    asNotFound: boolean
  }>(async (props) => {
    // ignore...
  })
}

function createServerComponentRenderer<Props>(
  ComponentToRender: (props: Props) => any,
  {
    ComponentMod,
    clientReferenceManifest,
  }: ServerComponentRendererOptions
): (props: Props) => JSX.Element {
  let flightStream: ReadableStream<Uint8Array>
  const createFlightStream = (props: Props) => {
    if (!flightStream) {
      // 轉換為 flightStream
      flightStream = ComponentMod.renderToReadableStream(
        // 這邊的組件就是剛剛上面的 async 組件
        <ComponentToRender {...(props as any)} />,
        clientReferenceManifest.clientModules,
      )
    }
    return flightStream
  }

  const flightResponseRef: FlightResponseRef = { current: null }

  // 最終回傳一個組件出去
  return function ServerComponentWrapper(props: Props): JSX.Element {
    // 轉換為 response 後丟給 React.use
    const response = useFlightResponse(
      createFlightStream(props),
      clientReferenceManifest,
      // ignore...
    )
    return use(response)
  }
}

class ServerRenderer implements Renderer {
  private readonly renderToReadableStream = require('react-dom/server.edge')
    .renderToReadableStream as typeof import('react-dom/server.edge')['renderToReadableStream']

  constructor(private readonly options: RenderToReadableStreamOptions) {}

  public async render(children: JSX.Element): Promise<RenderResult> {
    const stream = await this.renderToReadableStream(children, this.options)
    return { stream }
  }
}

function createStaticRenderer(): Renderer {
  // ignore...
  return new ServerRenderer({
    // ignore...
  })
}

class RenderResult {
  public toUnchunkedString(stream = false): Promise<string> | string {
    // ignore...
    return streamToString(this.readable)
  }
}

async function streamToString(
  stream: ReadableStream<Uint8Array>
): Promise<string> {
  let buffer = ''

  await stream
    // Decode the streamed chunks to turn them into strings.
    .pipeThrough(createDecodeTransformStream())
    .pipeTo(
      new WritableStream<string>({
        write(chunk) {
          buffer += chunk
        },
      })
    )

  return buffer
}

function createDecodeTransformStream(decoder = new TextDecoder()) {
  return new TransformStream<Uint8Array, string>({
    transform(chunk, controller) {
      return controller.enqueue(decoder.decode(chunk, { stream: true }))
    },
    flush(controller) {
      return controller.enqueue(decoder.decode())
    },
  })
}