NextJS freymworkinde mazmuny barlamak

Öňki sapaklarda biz iki görnüşli komponentleri ýasamaga synanyşdyk - serwer we müşderi komponentleri. Geliň, serwer komponentlerinde SEO meselesiniň çözülendigine göz ýetirýäris. Ýagni, brauzere bizeň komponentimiziň teksti bilen wertkanıň gelýändigini barlamaly. Muny edeliň.

Bizeň serwer komponentimiziň aşakdaky görnüşi bolsun:

src/app/test/page.jsxexport default function Test() {
  let name = 'ulanyjy';
  return <h1>salam, {name}!</h1>;
}

Bu komponentli sahypany brauzerde açyň. Soňra Ctrl + U basyň. Bu klawiatura birleşmesi sahypanyň original HTML koduny açjar. Bu serwerden gelýän koddur. Ýagni, brauzer JavaScript-iň ulanmagyna çenli. Gözleg ulgamlary bizeň sahypamyzy edil şeýle görýärler. Şeýlelik bilen, original kody açyň we öwreniň. Ol ýerde bizeň komponentimiziň tekstini taparsyňyz.

Geliň mysal üçin indi müşderi komponentini ýasaýaly:

src/app/test/page.jsx'use client';

import { useState } from 'react';

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

Ýene Ctrl + U basyň we oryginal kody öwreniň. Bizeň komponentimiziň tekstini tapmazsyz, sebäbi onuň teksti brauzerde dinamiki ýönde döredilýär.

Serwer we müşderi komponentleriniň arasyndaky esasy tapawut şonda özüni görkezýär.