Проверка на содржината во рамката 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, какви други разлики имаат клиентските и серверските компоненти?