Русский
Открыть в Telegram

ПостКак бандлеры работают с React Server Components

16 января 2025
З
Заметки про React
Ссылка
нажмите — покажем
Как бандлеры работают с React Server Components Мейнтенер 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
37 · 3K ·

Рядом в ленте

ЗЗаметки про ReactВам не нужен Next.js Автор мигрировал админку с Next.js на обычный React и TanStack Router с Rspack и сократил время сборки проекта с 3 минут до 18 секунд, а HoЗЗаметки про ReactВ React добавили компонент <ViewTransition> Появился PR с добавлением View Transition API в виде компонента <ViewTransition>. View Transition API предназначен д
это сообщение
ЗЗаметки про ReactОсновы доступности, которые должен знать каждый фронтенд-разработчик Мартин Холс в своем блоге рассказал о ключевых принципах доступности, которые должен знать ЗЗаметки про ReactДелаем использование FormData типобезопасным Новый хук useActionState в React 19 позволяет обрабатывать отправку данных в формах, пример: export default functio
ЗЗаметки про ReactЗаметки про React@ru_react_notes · канал · Технологии
3 412подписчиков491постов в индексе
Лента площадки Открыть в Telegram

Открытая публичная лента из поискового индекса ChatCrawler — «Google по публичному Telegram»; обновляется по мере обхода площадки. Время — UTC.

Только публичный контент, официальный API Telegram. О проекте · Вопросы · Границы индекса · Убрать страницу из выдачи · Каталог · Поиск · Как мы считаем