NextJS фреймворгіндегі контентті тексеру

Алдыңғы сабақтарда біз екі түрлі компонент жасауды байқадық - серверлік және клиенттік. Серверлік компоненттерде SEO мәселесі шешілгендігіне көз жеткізейік. Яғни браузерге біздің компоненттің мәтіні бар верстка келетінін тексеруіміз керек. Мұны істейік.

Біздің серверлік компонент мынадай болсын:

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-дан басқа, клиенттік және серверлік компоненттердің тағы қандай айырмашылықтары бар?