Что такое серверный и клиентский компонент в Next.js? Как объявляется клиентский компонент? Можно ли вкладывать серверный компонент в клиентский и наоборот?

В Next.js компоненты могут быть серверными (Server Components) и клиентскими (Client Components).

• Серверный компонент рендерится на сервере и не содержит клиентского состояния или эффектов. Он может напрямую обращаться к базе данных и API без передачи данных на клиент.

• Клиентский компонент рендерится на клиенте, поддерживает состояние, хуки React (например, useState, useEffect) и взаимодействие с пользователем.

Чтобы объявить клиентский компонент, в начале файла нужно добавить директиву:

'use client';

import React, { useState } from 'react';

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

Вложенность:

• Серверный компонент может вкладывать клиентский компонент, так как серверный компонент рендерится на сервере и может отдавать клиентский компонент для рендера на клиенте.
• Клиентский компонент не может напрямую содержать серверный компонент, так как серверный компонент не поддерживает клиентские хуки и состояние.

Таким образом, вложенность возможна только в направлении серверный → клиентский.