Node.js 24: React Server Components с react-server-node без Next.js

[hannadev]

Node.js 24 наконец-то притащил встроенную поддержку React Server Components через react-server-node. Это значит серверный рендер React-компонентов без Next.js - чисто нативно, без лишнего бойлерплейта. Разработчики могут рендерить RSC прямо в Node, миксуя серверные и клиентские части, и стримить результат клиенту. Зачем это? Меньше JS-бандла, быстрее загрузка, доступ к БД и файлам на сервере без API-оберток.

Проблема старого SSR в том, что весь React летит клиенту, а серверные данные тянутся отдельно. С RSC сервер рендерит статичные части, клиент только интерактив. Node.js 24 упрощает это до минимума - никаких фреймворков, просто node --experimental-rsc и вперед. Получится легкий SSR с гидрацией только там, где нужно.

Что такое RSC в Node.js 24 и как это работает

React Server Components - это когда часть дерева компонентов рендерится исключительно на сервере. Сервер генерит React-элементы, сериализует их в поток и шлет клиенту. Клиент с помощью createFromFetch реконструирует дерево и гидратирует только клиентские части. В Node.js 24 это встроено через react-server-node - специальный рантайм для RSC без webpack-loader или Next.js.

Представь: серверный компонент тянет данные из БД напрямую, рендерит HTML+ReactNode, а клиент получает поток и вставляет в DOM. Нет useEffect для фетча, нет лишнего состояния - async/await работает нативно в серверных файлах. React-server-node обрабатывает это через AsyncLocalStorage из node:async_hooks, трекая контекст рендера. Круто для приложений, где нужен быстрый initial render без фреймворк-оверхеда.

• Серверный рендер: Компоненты с .server.js рендерятся на Node, доступ к FS и secrets.
• Клиентская гидрация: Только .client.js идут в бандл, с хуками и event handlers.
• Потоковая передача: Используй Suspense для lazy-loading частей дерева.
• Пропсы: Только сериализуемые данные от сервера к клиенту, children - любой RSC.

// server.jsx
import { createRscStream } from 'react-server-node';

export default async function ServerPage() {
  const data = await fetchDataFromDB();
  return <div>{data.map(item => <ItemServer key={item.id} item={item} />)}</div>;
}

Сравнение RSC в Node.js 24 vs Next.js и старый SSR

В Node.js 24 RSC работает нативно, без App Router или страниц Next.js. React-server-node - это легкий сервер, который парсит RSC-файлы и стримит через HTTP. Next.js оборачивает это в свой роутер, middleware и оптимизации, но добавляет зависимостей. Чистый Node дает полный контроль: свой бандлер, кастомный сервер, никаких pages/api.

Старый SSR рендерит все на сервере, потом гидратирует весь бандл - жирно и медленно. RSC режет бандл на 70-90%, сервер рендерит статичный контент, клиент - интерактив. В Node.js 24 это проще настроить: npm init, добавь react-server-node, и рендери через node index.js. Но учти - экспериментально, как и в Expo Router или Parcel RSC.

Характеристика	Node.js 24 + RSC	Next.js RSC	Классический SSR
Зависимости	Минимальные (react-server-node)	Next.js fullstack	Express + ReactDOM
Бандл размер	Только клиентские компоненты	Оптимизировано	Полный React
Доступ к БД	Прямой в server.jsx	Через server actions	Через API
Настройка	node --experimental-rsc	npx create-next-app	Boilerplate вручную
Гибкость	Полный контроль	Ограничен фреймворком	Полный, но verbose

Ключевой плюс Node: Нет lock-in в экосистему, интегрируй с Express, Fastify или Deno. Нюанс: Пока beta, следи за async_hooks DoS-уязвимостями из января 2026.

Практический пример: минимальный RSC-сервер на Node.js 24

Создаем сервер: index.js импортирует react-server-node, регистрирует RSC-модули и стартует HTTP-сервер. Клиент запрашивает /rsc, получает поток RSC payload. На сервере OuterServerComponent миксует ClientComponent с ServerComponent - сервер рендерит span, клиент оборачивает в div с хуками.

Сервер стримит через fetch(‘/rsc’), клиент парсит с createFromFetch. Suspense ловит фолбэк, пока сервер не догонит данные. Async компоненты тянут из API или БД без useSWR. В dev-режиме hot reload серверных частей через router.reload(). Проще Next.js - никаких tsconfig.json с experimental rsc.

1. Установка: npm init -y && npm i react react-dom react-server-node.
2. Серверный компонент (page.server.jsx):

   async function PageServer() {
     const posts = await db.query('SELECT * FROM posts');
     return <PostListServer posts={posts} />;
   }
   

3. Сервер (server.js): const stream = rsc.renderToStream(<PageServer />); res.write(stream);.
4. Клиент: <Suspense><RscRoot src='/rsc' /></Suspense> с гидрацией.

Важно: Маркируй файлы .server.js и .client.js явно, линтер поможет.

Когда RSC на Node.js 24 выстрелят по-настоящему

Node.js 24 с react-server-node - killer-фича для микросервисов и легких SSR-приложений. Без Next.js код чище, бандл меньше, производительность на уровне Remix или SolidStart. Остается дошлифовать стабильность - уязвимости вроде CVE-2025-55182 в react-server-dom-webpack уже пофиксили, но в нативном Node еще тесты нужны.

Дальше ждем интеграцию с Bun или Deno, плюс Vite RSC plugin для быстрого dev. Стоит поэкспериментировать на pet-проектах: увидишь, как стейт делится на сервер/клиент, а TTI падает вдвое. Но для продакшена пока мониторь Node changelog - фича молодая, но перспективная.