NextJS фреймворгунда мазмунду текшерүү

Мурунку сабактарда биз эки түрдүү компонент жасап көрдүк - сервердик жана клиенттик. Келгиле, сервердик компоненттерде SEO көйгөйү чечилгенине ишенели. Башкача айтканда, биз браузерге биздин компоненттин тексти менен верстка келгенин текшерүүбүз керек. Муну жасайлы.

Биздин сервердик компонент төмөнкүдөй көрүнсүн:

export default function Test() {
	let name = 'колдонуучу';
	return <h1>салам, {name}!</h1>;
}

Бул компонент бар баракты браузерде ачыңыз. Андан кийин Ctrl + U басыңыз. Бул баскычтар айкалышы беттин баштапкы HTML кодунан ачат. Бул серверден келген код. Башкача айтканда, ага браузердин JavaScript колдонулганга чейин. Дал ушундай жол менен биздин баракты издөө системалары көрөт. Ошентип, баштапкы коду ачып, аны изилдеңиз. Анда сиз биздин компоненттин текстин табасыз.

Келгиле, мисал үчүн азыр клиенттик компонент жасайлы:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('колдонуучу');
	return <h1>салам, {name}!</h1>;
}

Дагы эле Ctrl + U басып, баштапкы кодду изилдеңиз. Сиз биздин компоненттин текстин таппайсыз, анткени анын тексти браузерде динамикалык түрдө түзүлөт.

Бул сервердик жана клиенттик компоненттердин ортосундагы негизги айырмачылык ушуну менен көрүнөт.

Сабакта сүрөттөлгөн аракеттерди жасаңыз.

Сервердик жана клиенттик компоненттердин ортосундагы айырмачылыктарды SEO нуктесинен айтып бериңиз.

SEOдан сырткары, клиенттик жана сервердик компоненттерде кандай дагы башка айырмачылыктар бар?