已经有线上应用使用了 server component 技术。

定义及原理

Screen Shot 2022-11-11 at 17.08.00.png

React 18 提供三种组件

• Server Component (.server.tsx)
  • 会打成 html 在浏览器端渲染
  • 不回出现在 bundle 中
  • 不提供交互性

export default function Homepage {
  return (
    <Layout>
      <SeoForHomePage />
      <HomePageContent />
    </Layout>
  );
}

• Client Component (.client.tsx)

  • 发送给，并在浏览器端执行渲染
  • 提供交互性

function HomePageContent {
  const [quality, setQuality] = useState(1000);
  return <input value={quality} onChange={event => setQuality(event.target.value)} />;
}

• Shared Component
  • 可以在服务器端执行，也可以在客户端执行

function ShareComponent {
  return <>I mainly just hold content and cannot do much</>;
}

知识点

1. 绝大部分的组件库都是 client component
2. server component 可能需要花大量时间加载数据，并且可能触发级连加载

React 18 使用 Suspense 帮助缓解大量加载

return (<Layout>
  <Suspense>
    <FetchALotComponent />
  </Suspense>
</Layout>);

3. server component 难以 debug
4. 将 server component 封装一下很有帮助

headless 远景可期

• 利用 Edge Workers 来提升速度，让服务端渲染离浏览器更近，提升相应速度。
• 更多的应用承载平台，例如 Oxygen 平台

https://hydrogen.new