React Server Components: разбираемся на практике

TL;DR: React Server Components (RSC) — это не просто SSR 2.0. Основные преимущества: streaming-рендеринг, уменьшение bundle size за счет серверного выполнения и параллельный data fetching. Но реальная выгода зависит от архитектуры приложения.

Введение: зачем нужны RSC?

С появлением React Server Components в 2020 году многие разработчики задались вопросом — не очередной ли это хайп? После нескольких лет эволюции концепции стало ясно: RSC — это фундаментальное изменение модели работы React.

Ключевое отличие от традиционного SSR:

• SSR: рендерим HTML на сервере → гидратируем на клиенте
• RSC: выполняем часть логики компонентов на сервере → передаем serialized output клиенту

Основные преимущества RSC

1. Уменьшение bundle size

// Server Component - НЕ попадает в клиентский бандл
function MarkdownRenderer({ content }) {
  const html = marked.parse(content); // Используем heavy library на сервере
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Но есть нюанс — эффект “use client bubbling”:

// Client Component - попадает в бандл
'use client';
function ClientWrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

// При использовании:
<ClientWrapper>
  <MarkdownRenderer content="# Hello" /> {/* MarkdownRenderer все равно остается server component */}
</ClientWrapper>

2. Streaming и Suspense

Традиционный SSR:

[Ждем весь HTML] → [Отправляем] → [Показываем]

RSC с Streaming:

[Часть 1 готова] → [Отправляем] → [Показываем]
[Часть 2 готова] → [Отправляем] → [Дополняем UI]

Пример с Suspense:

async function ProductDetails({ id }) {
  const product = await fetchProduct(id); // Серверный data fetching
  return <div>{product.name}</div>;
}

function ProductPage() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductDetails id="123" />
    </Suspense>
  );
}

3. Data fetching без waterfall

До RSC:

Parent fetch → Child fetch → Grandchild fetch (последовательно)

С RSC:

Parent fetch
Child fetch      (параллельно)
Grandchild fetch

Пример:

async function Parent() {
  const [user, posts] = await Promise.all([
    fetchUser(),
    fetchPosts()
  ]);
  return <Profile user={user} posts={posts} />;
}

async function Profile({ user, posts }) {
  // Все данные уже загружены параллельно
}

Практическое применение

Когда использовать RSC?

1. Статический контент: блоги, документация
2. Data-heavy компоненты: dashboards, admin panels
3. Взаимодействие с БД: прямой доступ из компонентов

Когда НЕ использовать RSC?

1. Интерактивные элементы: формы, анимации
2. Браузерные API: доступ к window, localStorage
3. Состояние компонентов: useState, useEffect

Оптимальная архитектура

graph TD
  A[Layout - Server] --> B[Header - Client]
  A --> C[MainContent - Server]
  C --> D[ProductList - Server]
  C --> E[AddToCart - Client]

Заключение

React Server Components — это не замена SSR или CSR, а новый инструмент в арсенале React-разработчика. Основные преимущества:

• Уменьшение бандла для серверных частей приложения
• Возможность streaming-рендеринга
• Оптимизированный data fetching

Однако максимальный эффект достигается только при грамотном разделении client/server компонентов и понимании ограничений модели. В 2024 году RSC становятся must-have технологией для production-приложений на Next.js и других современных фреймворках.

Источник: https://www.reddit.com/r/reactjs/comments/1so6gty/i_think_i_understand_react_server_component_now/