Šta je server i klijent komponent u Next.js? Kako se deklarise klijent komponenta? Da li je moguće ugraditi server komponentu u klijent komponentu i obrnuto?

В 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>;
}

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

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

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