NextJS Framework'unda İçerik Kontrolü

Önceki derslerde iki tür bileşen yapmayı denedik - sunucu bileşenleri ve istemci bileşenleri. Sunucu bileşenlerinde SEO ile ilgili sorunun çözüldüğünden emin olalım. Yani, tarayıcıya bileşenimizin metniyle birlikte doğru HTML'in geldiğini kontrol etmeliyiz. Bunu yapalım.

Sunucu bileşenimizin aşağıdaki gibi olduğunu varsayalım:

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

Bu bileşeni içeren sayfayı tarayıcıda açın. Ardından Ctrl + U tuşlarına basın. Bu tuş kombinasyonu sayfanın kaynak HTML kodunu açacaktır. Bu, sunucudan gelen koddur. Yani tarayıcının JavaScript'ini uygulamadan önceki hali. Arama motorları sayfamızı bu şekilde görür. Kaynak kodunu açın ve inceleyin. Orada bileşenimizin metnini bulacaksınız.

Örnek olarak şimdi bir istemci bileşeni yapalım:

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

import { useState } from 'react';

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

Tekrar Ctrl + U tuşlarına basın ve kaynak kodu inceleyin. Bileşenimizin metnini bulamayacaksınız, çünkü metni tarayıcıda dinamik olarak oluşturulur.

Sunucu ve istemci bileşenleri arasındaki temel fark bu şekilde ortaya çıkar.