Типы React компонентов в NextJS

В классическом React рендеринг происходит на стороне клиента, что создает проблему с SEO. Поэтому разработчики React решили сделать так, чтобы React поддерживал не только клиентский рендеринг, но и серверный.

Для этого в React ввели два типа компонентов: клиентские (RCC) и серверные (RSC).

Серверные компоненты рендерятся на сервере и результат рендеринга отправляется в браузер в виде HTML кода. Клиентские компоненты рендерятся прямо в браузере.

В серверных компонентах мы можем использовать JSX, но не можем использовать хуки для работы с DOM (типа useState), а также обращение к тем командам JavaScript, которые доступны только в браузере. Взамен мы можем использовать NodeJS, например, чтобы читать содержимое файлов, либо обращаться к базе данных.

Клиентские компоненты фактически это те компоненты, к которым мы привыкли при изучении React. В них мы можем использовать и JSX, и хуки для работы с DOM.

Чтобы объявить компонент клиентским, в начале файла компонента нужно написать специальную директиву 'use client'. Вот пример кода клиентского компонента:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	
	return (
		<div>
			<p>hello, {name}!</p>
		</div>
	);
}

Чтобы объявить компонент серверным, в начале файла компонента нужно написать специальную директиву 'use server'. Вот пример кода серверного компонента:

'use server';

export default function Test() {
	let name = 'user';
	
	return (
		<div>
			<p>hello, {name}!</p>
		</div>
	);
}

NextJS поддерживает оба типа компонентов. По умолчанию все компоненты серверные и директиву 'use server' в них можно не писать.

Изучение NextJS мы начнем с серверных компонентов. А затем добавим клиентские.

Что такое RCC в React?

Что такое RSC в React?

Как в React объявить клиентский компонент?

Как в React объявить серверный компонент?

Будет ли в серверном компоненте работать хук useState?

Будет ли в серверном компоненте работать JavaScript метод querySelector?