Hydrate from Javascript

hydrate-client.tsx

/// <reference types="requestidlecallback-polyfill" />
import React, { createElement, useEffect, useState } from "react"

if (typeof window !== "undefined") {
  require("requestidlecallback-polyfill")
}

const components = {
  Test: () => {
    return <div>Hello!</div>
  },
}

const Page = () => {
  const jsxSource = {
    compiledSource: `
    function HTMLContent() { return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Hello"), /*#__PURE__*/React.createElement(Test, null)) }
`,
    renderedOutput: `
<p>Hello</p>
<div>Hello!!</div>
`,
  }

  const content = hydrate(jsxSource)

  return (
    <div>
      <h1>Hello</h1>
      <div>{content}</div>
    </div>
  )
}

function hydrate(source: { compiledSource: string; renderedOutput: string }) {
  const [result, setResult] = useState<React.ReactElement>(
    // 初期値はサーバサイドでレンダリングしたHTML
    createElement("div", {
      dangerouslySetInnerHTML: {
        __html: source.renderedOutput,
      },
    })
  )

  useEffect(() => {
    const handler = window.requestIdleCallback(() => {
      const scope = { ...components }
      const hydrateFn = Reflect.construct(Function, [
        "React",
        ...Object.keys(scope),
        source.compiledSource + "\nreturn React.createElement(HTMLContent)",
      ])
      const hydrated = hydrateFn.apply(hydrateFn, [
        React,
        ...Object.values(scope),
      ])
      setResult(hydrated)
      window.cancelIdleCallback(handler)
    })
    return () => window.cancelIdleCallback(handler)
  }, [source.compiledSource])

  return result
}

export default Page