Мейнтенер RSPack написал подробную статью о том, как бандлеры Webpack и Turbopack работают с React Server Components и серверными действиями. Хоть и для RSC есть описание функционала в документе RFC, но информация об интеграциях (с бандлерами, с роутером и т.д.) в нем описана относительно просто. Поэтому автор решил написал статью о том, как происходит интеграция RSC с бандлерами на примере Webpack и Turbopack.
⭐️ Как устроен бандлинг клиентского компонента в серверных компонентах
В процессе бандлинга клиентского компонента "use client" в окружение сервера заменится ссылкой на компонент:
// src/ClientComp.js
"use client"
export function ClientComp() { return <div>...</div> }
Будет заменен на:
import { createClientReference } from "plugin/runtime/server.js"
export let ClientComp = createClientReference("src/ClientComp.js#ClientComp")
Когда сервер рендерит серверный компонент, импортированный клиентский компонент будет являться фактически ссылкой на клиентский компонент.
import { ClientComp } from "./ClientComp"
export async function App() { return <div><ClientComp /></div> }
Сериализованный JSX кода выше:
0:"$L1"
// Результат рендеринга Client Reference, включая некоторые метаданные
2:I{"id":"./src/ClientComp.js","chunks":["client0"],"name":"ClientComp","async":false}
1:["$","div",null,{"children":["$","$L2",null,{}]}]
При отправке клиенту (включая SSR) для рендеринга результата работы серверного компонента (сериализованный JSX), при встрече с клиентской ссылкой, клиентский модуль с компонентом будет загружен через эти метаданные. Сначала React загрузит чанки по
__webpack_chunk_load__(chunkId), затем запустит соответствующий модуль по __webpack_require__(moduleId), и, наконец, получит экспортированный клиентский компонент для рендеринга.https://github.com/orgs/web-infra-dev/discussions/23
