Arten von React-Komponenten in NextJS

Im klassischen React findet das Rendering auf der Clientseite statt, was ein Problem für die SEO darstellt. Daher entschieden sich die React-Entwickler dafür, React so zu gestalten, dass es nicht nur Client-Rendering, sondern auch Server-Rendering unterstützt.

Dafür wurden in React zwei Arten von Komponenten eingeführt: Client-Komponenten (RCC) und Server-Komponenten (RSC).

Server-Komponenten werden auf dem Server gerendert und das Rendering-Ergebnis wird an den Browser in Form von HTML-Code gesendet. Client-Komponenten werden direkt im Browser gerendert.

In Server-Komponenten können wir JSX verwenden, aber keine Hooks für die Arbeit mit dem DOM (wie useState) verwenden, sowie keinen Zugriff auf die JavaScript-Befehle, die nur im Browser verfügbar sind. Stattdessen können wir NodeJS verwenden, um beispielsweise den Inhalt von Dateien zu lesen oder auf die Datenbank zuzugreifen.

Client-Komponenten sind im Grunde die Komponenten, an die wir uns aus dem React-Studium gewöhnt haben. In ihnen können wir sowohl JSX, als auch Hooks für die Arbeit mit dem DOM verwenden.

Um eine Komponente als Client-Komponente zu deklarieren, muss am Anfang der Komponentendatei die spezielle Direktive 'use client' geschrieben werden. Hier ist ein Beispielcode für eine Client-Komponente:

'use client';

import { useState } from 'react';

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

Um eine Komponente als Server-Komponente zu deklarieren, muss am Anfang der Komponentendatei die spezielle Direktive 'use server' geschrieben werden. Hier ist ein Beispielcode für eine Server-Komponente:

'use server';

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

NextJS unterstützt beide Arten von Komponenten. Standardmäßig sind alle Komponenten Server-Komponenten und die Direktive 'use server' kann in ihnen weggelassen werden.

Wir beginnen das NextJS-Studium mit Server- Komponenten. Und fügen dann Client-Komponenten hinzu.

Was ist RCC in React?

Was ist RSC in React?

Wie deklariert man in React eine Client-Komponente?

Wie deklariert man in React eine Server-Komponente?

Würde der Hook useState in einer Server-Komponente funktionieren?

Würde die JavaScript-Methode querySelector in einer Server-Komponente funktionieren?