Пост 5 заблуждений о React Server Components

5 заблуждений о React Server Components В React 19 представили большое архитектурное изменение: разделение на серверные и клиентские компоненты. Серверные компоненты выполняются только на сервере, и их код не попадает в клиентский бандл. Клиентские компоненты – обычные компоненты React, к которым уже все привыкли. Эта новая архитектура направлена на использование сильных сторон как на сервере, так и на клиенте. Возможно, некоторые поняли новую концепцию серверных компонентов неправильно и вот некоторые заблуждения о них: - Предпочитайте только серверные компоненты, а клиентские используйте редко. Это не так, потому что серверные компоненты не подходят для всех сценариев, особенно которые требуют интерактивности. Серверные компоненты – это новый тип компонентов, которые выполняются только на сервере, получают данные и рендерят их на сервере для повышения производительности. async function UserProfile({ userId }) { const response = await db.query('SELECT * FROM users WHERE id = ?', [userId]); const user = response.user; return ( <div> <h1>{user.name}</h1> <p>Email: {user.email}</p> </div> ); } - use client помечает клиентские компоненты, а use server помечает серверные компоненты. На самом деле директива use client помечает клиентские компоненты. Но директива use server не нужна, все компоненты по умолчанию являются серверными. - Каждый клиентский компонент должен иметь директиву use client. На самом деле достаточно объявить директиву use client один раз в корневом файле клиентского компонента. Все компоненты, определенные в этом файле, автоматически станут клиентскими. Сюда входят вложенные компоненты, утилиты и функции внутри файла. - Серверные компоненты не могут быть вложены в клиентские компоненты. Напрямую импортировать серверный компонент в клиентский нельзя. Но использовать серверный компонент внутри клиентского можно через проп, например, children: // ServerComponent.js function ServerComponent() { return <h1>Hello from the server</h1>; } // ClientComponent.js 'use client' function ClientComponent({ children }) { return ( <div> <p>This is a client component</p> {children} </div> ); } // Usage function App() { return ( <ClientComponent> <ServerComponent /> </ClientComponent> ); } https://www.builder.io/blog/nextjs-react-server-components