Вы работали с React Server Components? Какие есть ограничения по сравнению с клиентскими компонентами?

Что такое React Server Components?

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

Ограничения по сравнению с клиентскими компонентами

Основные ограничения RSC связаны с тем, что они не имеют доступа к среде браузера. Вот ключевые различия:

• Нет хуков состояния и эффектов: RSC не могут использовать useState, useEffect, useReducer и другие хуки, которые зависят от клиентского состояния или жизненного цикла.
• Нет обработчиков событий: Нельзя добавить onClick, onChange и другие события, так как они требуют JavaScript на клиенте.
• Нет доступа к браузерным API: RSC не могут использовать window, document, localStorage и другие API.
• Не поддерживают интерактивность: RSC предназначены только для рендеринга статического контента. Для интерактивности нужно использовать клиентские компоненты.
• Не могут быть асинхронными в классическом смысле: Хотя RSC могут быть асинхронными (например, для загрузки данных), они не поддерживают async/await в том же виде, что и клиентские компоненты.

Пример кода

Пример серверного компонента, который загружает данные и рендерит их:

// ServerComponent.jsx (выполняется на сервере)
import { getPosts } from './api';

export default async function ServerComponent() {
  const posts = await getPosts();
  return (
    
      {posts.map(post => (
        {post.title}
      ))}
    
  );
}

Пример клиентского компонента с интерактивностью:

// ClientComponent.jsx (выполняется в браузере)
'use client';
import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
     setCount(count + 1)}>
      Clicked {count} times
    
  );
}

Вывод

React Server Components полезны для оптимизации производительности за счет уменьшения объема JavaScript, но их следует применять только для статического или серверного контента. Для интерактивных элементов обязательно используйте клиентские компоненты с директивой 'use client'.