<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Node.js 24: React Server Components с react-server-node без Next.js]]></title><description><![CDATA[<p dir="auto"><img src="/assets/uploads/files/ae/8c/0d/1774199006653-generated_1774198991063.webp" alt="Обложка: Node.js 24: Встроенная поддержка React Server Components с react-server-node для серверного рендеринга без Next.js" class=" img-fluid img-markdown" /></p>
<p dir="auto">Node.js 24 наконец-то притащил встроенную поддержку <strong>React Server Components</strong> через react-server-node. Это значит серверный рендер React-компонентов без Next.js - чисто нативно, без лишнего бойлерплейта. Разработчики могут рендерить RSC прямо в Node, миксуя серверные и клиентские части, и стримить результат клиенту. Зачем это? Меньше JS-бандла, быстрее загрузка, доступ к БД и файлам на сервере без API-оберток.</p>
<p dir="auto">Проблема старого SSR в том, что весь React летит клиенту, а серверные данные тянутся отдельно. С RSC сервер рендерит статичные части, клиент только интерактив. Node.js 24 упрощает это до минимума - никаких фреймворков, просто node --experimental-rsc и вперед. Получится легкий SSR с гидрацией только там, где нужно.</p>
<h2>Что такое RSC в Node.js 24 и как это работает</h2>
<p dir="auto">React Server Components - это когда часть дерева компонентов рендерится исключительно на сервере. Сервер генерит React-элементы, сериализует их в поток и шлет клиенту. Клиент с помощью createFromFetch реконструирует дерево и гидратирует только клиентские части. В Node.js 24 это встроено через react-server-node - специальный рантайм для RSC без webpack-loader или Next.js.</p>
<p dir="auto">Представь: серверный компонент тянет данные из БД напрямую, рендерит HTML+ReactNode, а клиент получает поток и вставляет в DOM. Нет useEffect для фетча, нет лишнего состояния - async/await работает нативно в серверных файлах. React-server-node обрабатывает это через AsyncLocalStorage из node:async_hooks, трекая контекст рендера. Круто для приложений, где нужен быстрый initial render без фреймворк-оверхеда.</p>
<ul>
<li><strong>Серверный рендер</strong>: Компоненты с .server.js рендерятся на Node, доступ к FS и secrets.</li>
<li><strong>Клиентская гидрация</strong>: Только .client.js идут в бандл, с хуками и event handlers.</li>
<li><strong>Потоковая передача</strong>: Используй Suspense для lazy-loading частей дерева.</li>
<li><strong>Пропсы</strong>: Только сериализуемые данные от сервера к клиенту, children - любой RSC.</li>
</ul>
<pre><code class="language-javascript">// server.jsx
import { createRscStream } from 'react-server-node';

export default async function ServerPage() {
  const data = await fetchDataFromDB();
  return &lt;div&gt;{data.map(item =&gt; &lt;ItemServer key={item.id} item={item} /&gt;)}&lt;/div&gt;;
}
</code></pre>
<h2>Сравнение RSC в Node.js 24 vs Next.js и старый SSR</h2>
<p dir="auto">В Node.js 24 RSC работает нативно, без App Router или страниц Next.js. React-server-node - это легкий сервер, который парсит RSC-файлы и стримит через HTTP. Next.js оборачивает это в свой роутер, middleware и оптимизации, но добавляет зависимостей. Чистый Node дает полный контроль: свой бандлер, кастомный сервер, никаких pages/api.</p>
<p dir="auto">Старый SSR рендерит все на сервере, потом гидратирует весь бандл - жирно и медленно. RSC режет бандл на 70-90%, сервер рендерит статичный контент, клиент - интерактив. В Node.js 24 это проще настроить: npm init, добавь react-server-node, и рендери через node index.js. Но учти - экспериментально, как и в Expo Router или Parcel RSC.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Характеристика</th>
<th>Node.js 24 + RSC</th>
<th>Next.js RSC</th>
<th>Классический SSR</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Зависимости</strong></td>
<td>Минимальные (react-server-node)</td>
<td>Next.js fullstack</td>
<td>Express + ReactDOM</td>
</tr>
<tr>
<td><strong>Бандл размер</strong></td>
<td>Только клиентские компоненты</td>
<td>Оптимизировано</td>
<td>Полный React</td>
</tr>
<tr>
<td><strong>Доступ к БД</strong></td>
<td>Прямой в server.jsx</td>
<td>Через server actions</td>
<td>Через API</td>
</tr>
<tr>
<td><strong>Настройка</strong></td>
<td>node --experimental-rsc</td>
<td>npx create-next-app</td>
<td>Boilerplate вручную</td>
</tr>
<tr>
<td><strong>Гибкость</strong></td>
<td>Полный контроль</td>
<td>Ограничен фреймворком</td>
<td>Полный, но verbose</td>
</tr>
</tbody>
</table>
<p dir="auto"><strong>Ключевой плюс Node</strong>: Нет lock-in в экосистему, интегрируй с Express, Fastify или Deno. <em>Нюанс</em>: Пока beta, следи за async_hooks DoS-уязвимостями из января 2026.</p>
<h2>Практический пример: минимальный RSC-сервер на Node.js 24</h2>
<p dir="auto">Создаем сервер: index.js импортирует react-server-node, регистрирует RSC-модули и стартует HTTP-сервер. Клиент запрашивает /rsc, получает поток RSC payload. На сервере OuterServerComponent миксует ClientComponent с ServerComponent - сервер рендерит span, клиент оборачивает в div с хуками.</p>
<p dir="auto">Сервер стримит через fetch(‘/rsc’), клиент парсит с createFromFetch. Suspense ловит фолбэк, пока сервер не догонит данные. Async компоненты тянут из API или БД без useSWR. В dev-режиме hot reload серверных частей через router.reload(). Проще Next.js - никаких tsconfig.json с experimental rsc.</p>
<ol>
<li><strong>Установка</strong>: <code>npm init -y &amp;&amp; npm i react react-dom react-server-node</code>.</li>
<li><strong>Серверный компонент</strong> (page.server.jsx):<pre><code class="language-javascript">async function PageServer() {
  const posts = await db.query('SELECT * FROM posts');
  return &lt;PostListServer posts={posts} /&gt;;
}
</code></pre>
</li>
<li><strong>Сервер</strong> (server.js): <code>const stream = rsc.renderToStream(&lt;PageServer /&gt;); res.write(stream);</code>.</li>
<li><strong>Клиент</strong>: <code>&lt;Suspense&gt;&lt;RscRoot src='/rsc' /&gt;&lt;/Suspense&gt;</code> с гидрацией.</li>
</ol>
<p dir="auto"><em>Важно</em>: Маркируй файлы .server.js и .client.js явно, линтер поможет.</p>
<h2>Когда RSC на Node.js 24 выстрелят по-настоящему</h2>
<p dir="auto">Node.js 24 с react-server-node - killer-фича для микросервисов и легких SSR-приложений. Без Next.js код чище, бандл меньше, производительность на уровне Remix или SolidStart. Остается дошлифовать стабильность - уязвимости вроде CVE-2025-55182 в react-server-dom-webpack уже пофиксили, но в нативном Node еще тесты нужны.</p>
<p dir="auto">Дальше ждем интеграцию с Bun или Deno, плюс Vite RSC plugin для быстрого dev. Стоит поэкспериментировать на pet-проектах: увидишь, как стейт делится на сервер/клиент, а TTI падает вдвое. Но для продакшена пока мониторь Node changelog - фича молодая, но перспективная.</p>
]]></description><link>https://forum.exlends.ru/topic/1852/node.js-24-react-server-components-s-react-server-node-bez-next.js</link><generator>RSS for Node</generator><lastBuildDate>Sat, 17 Oct 2026 04:05:55 GMT</lastBuildDate><atom:link href="https://forum.exlends.ru/topic/1852.rss" rel="self" type="application/rss+xml"/><pubDate>Sun, 22 Mar 2026 17:03:28 GMT</pubDate><ttl>60</ttl></channel></rss>