Typer av React-komponenter i NextJS

I klassisk React sker rendering på klientsidan, vilket skapar ett SEO-problem. Därför beslutade React-utvecklarna att göra så att React stöder inte bara klientrendering utan även serverrendering.

För detta introducerades två typer av komponenter i React: klientkomponenter (RCC) och serverkomponenter (RSC).

Serverkomponenter renderas på servern och resultatet av renderingen skickas till webbläsaren i form av HTML-kod. Klientkomponenter renderas direct i webbläsaren.

I serverkomponenter kan vi använda JSX, men vi kan inte använda hooks för att arbeta med DOM (som useState), samt åtkomst till de JavaScript-kommandon som endast är tillgängliga i webbläsaren. I gengäld kan vi använda NodeJS, till exempel för att läsa innehållet i filer, eller för att komma åt databasen.

Klientkomponenter är i praktiken de komponenter vi är vana vid från att lära oss React. I dem kan vi använda både JSX, och hooks för att arbeta med DOM.

För att deklarera en komponent som en klientkomponent, måste du skriva en speciell direktiv 'use client' i början av komponentfilen. Här är ett exempel på kod för en klientkomponent:

'use client';

import { useState } from 'react';

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

För att deklarera en komponent som en serverkomponent, måste du skriva en speciell direktiv 'use server' i början av komponentfilen. Här är ett exempel på kod för en serverkomponent:

'use server';

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

NextJS stöder båda typerna av komponenter. Som standard är alla komponenter serverkomponenter och direktivet 'use server' i dem behöver inte skrivas.

Vi börjar lära oss NextJS med serverkomponenter. Och sedan lägger vi till klientkomponenter.

Vad är RCC i React?

Vad är RSC i React?

Hur deklarerar man en klientkomponent i React?

Hur deklarerar man en serverkomponent i React?

Kommer hooken useState att fungera i en serverkomponent?

Kommer JavaScript-metoden querySelector att fungera i en serverkomponent?