Types de composants React dans NextJS

Dans React classique, le rendu se produit côté client, ce qui crée un problème de référencement naturel (SEO). C'est pourquoi les développeurs de React ont décidé de faire en sorte que React prenne en charge non seulement le rendu côté client, mais aussi le rendu côté serveur.

Pour cela, deux types de composants ont été introduits dans React : les composants client (RCC) et les composants serveur (RSC).

Les composants serveur sont rendus sur le serveur et le résultat du rendu est envoyé au navigateur sous forme de code HTML. Les composants client sont rendus directement dans le navigateur.

Dans les composants serveur, nous pouvons utiliser JSX, mais nous ne pouvons pas utiliser les hooks liés au DOM (comme useState), ni accéder aux commandes JavaScript qui ne sont disponibles que dans le navigateur. En contrepartie, nous pouvons utiliser NodeJS, par exemple, pour lire le contenu de fichiers, ou accéder à une base de données.

Les composants client sont essentiellement les composants auxquels nous sommes habitués lors de l'apprentissage de React. Dans ceux-ci, nous pouvons utiliser à la fois JSX et les hooks liés au DOM.

Pour déclarer un composant comme étant un composant client, il faut écrire la directive spéciale 'use client' au début du fichier du composant. Voici un exemple de code d'un composant client :

'use client';

import { useState } from 'react';

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

Pour déclarer un composant comme étant un composant serveur, il faut écrire la directive spéciale 'use server' au début du fichier du composant. Voici un exemple de code d'un composant serveur :

'use server';

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

NextJS prend en charge les deux types de composants. Par défaut, tous les composants sont serveur et la directive 'use server' peut ne pas être écrite dans ceux-ci.

Nous commencerons l'étude de NextJS par les composants serveur. Puis nous ajouterons les composants client.

Qu'est-ce que RCC dans React ?

Qu'est-ce que RSC dans React ?

Comment déclarer un composant client dans React ?

Comment déclarer un composant serveur dans React ?

Le hook useState fonctionnera-t-il dans un composant serveur ?

La méthode JavaScript querySelector fonctionnera-t-elle dans un composant serveur ?