Проверка на съдържанието в рамката NextJS

В предишните уроци ние опитахме да направим два типа компоненти - сървърни и клиентски. Нека се убедим, че в сървърните компоненти проблемът със SEO е решен. Тоест трябва да проверим, че към браузъра идва HTML с текста на нашия компонент. Нека го направим.

Нека нашият сървърен компонент има следния вид:

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

Отворете страницата с този компонент в браузъра. След това натиснете Ctrl + U. Тази комбинация от клавиши ще отвори оригиналния HTML код на страницата. Това е кодът, който идва от сървъра. Тоест преди прилагането на браузърния JavaScript. Така виждат нашата страница търсачките. И така, отворете оригиналния код и го проучете. Там ще намерите текста на нашия компонент.

Нека за пример сега направим клиентски компонент:

'use client';

import { useState } from 'react';

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

Отново натиснете Ctrl + U и проучете оригиналния код. Няма да намерите текста на нашия компонент, тъй като неговият текст се формира динамично в браузъра.

В това се проявява основната разлика между сървърните и клиентските компоненти.

Изпълнете описаните в урока манипулации.

Разкажете каква е разликата между сървърните и клиентските компоненти от гледна точка на SEO.

Освен SEO, какви други разлики имат клиентските и сървърните компоненти?