React Server Components

• Server-only: no bundle cost, access к DB/env vars direct
• Client components: "use client" directive, обычный React с hooks
• Serialization: props между server↔client должны быть JSON-serializable
• Suspense: streaming render boundary (loading.tsx в Next.js)
• Caching: fetch() automatically cached в RSC

// app/posts/page.tsx (Server Component)
async function PostList() {
  const posts = await db.post.findMany(); // direct DB access
  return posts.map(p => <Post key={p.id} {...p} />);
}

// Client component
'use client';
function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(true)}>♥</button>;
}

• Streaming SSR
• Edge Runtime
• Partial Hydration

React Server Components (RSC) — это новая концепция в экосистеме React, позволяющая разработчикам создавать компоненты, которые рендерятся на сервере. Это упрощает процесс разработки, улучшает производительность и снижает время загрузки страниц, так как позволяет отправлять клиенту только необходимый HTML-код. Основная идея заключается в том, что серверные компоненты могут извлекать данные и выполнять логику, не загружая лишние ресурсы на клиент.

Использование React Server Components предлагает множество преимуществ для разработчиков и пользователей:

• Улучшенная производительность: За счет предварительного рендеринга на сервере уменьшается количество JavaScript-кода, который необходимо загружать и выполнять на клиенте.
• Оптимизация загрузки данных: Серверные компоненты могут извлекать данные непосредственно перед рендерингом, что позволяет избежать лишних запросов и упрощает управление состоянием.
• Упрощение структуры приложения: Разделение компонентов на клиентские и серверные позволяет лучше организовать код и упростить его поддержку.

Также стоит отметить, что RSC поддерживает использование React Suspense, что позволяет более гибко управлять асинхронными загрузками данных.

Рассмотрим пример реализации React Server Component. Допустим, у нас есть серверный компонент, который извлекает данные о пользователях из API и отображает их на странице. Создадим файл UserList.server.js:

import React from 'react';

const UserList = async () => {
  const response = await fetch('https://api.example.com/users');
  const users = await response.json();

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
};

export default UserList;

В этом примере мы используем fetch для получения данных о пользователях. Обратите внимание, что компонент возвращает JSX, который будет рендериться на сервере. Теперь, чтобы использовать этот компонент в клиентском приложении, мы можем просто импортировать его:

import UserList from './UserList.server';

const App = () => {
  return (
    
      Список пользователей
      
    
  );
};

export default App;

Важно помнить, что серверные компоненты не могут использовать состояния и эффекты, присущие клиентским компонентам. Это позволяет избежать проблем с синхронизацией данных и улучшает производительность приложения.