Client Component Rehberi – Next.js 13

Next.js 13’de Client Componentler tarayıcı tarafında çalışan ve interaktifliği sağlayan React Bileşenleridir.
Bu yazıda client componentler nedir ve kodda nasıl kullanılır bunu anlattım.

Next.js 13 Client vs Server Component

Next.13 ile birlikte yeni app directory yapısı ve yeni komponent yapısı geldi.

Next’te server yani sunucu React componentları sunucuda derlenerek kullanıcıya gönderilir. Bu yüzden tarayıcının özel interaktif yapısına erişemez.

Client componentlar ise çoğu zaman tarayıcıda renderlanır ve useState() gibi özel react fonksiyonlarına erişebilir.

Next.js 13’de Client Component kullanımı

Next.js default olarak server side rendering‘i benimsediği için özellikle belirtmezseniz tüm react dosyalarını sunucuda derlemeye çalışır.

Bir React componentinin sunucuda değil tarayıcıda derlenmesini sağlamak için dosyanın en üstüne “use client” komutunu eklemeniz gerekli.
Aşağıdaki kod örneğinde “use client” görebilirsiniz.

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>{count} kere tıklandı </p>
      <button onClick={() => setCount(count + 1)}>Tıkla</button>
    </div>
  )
}

Client component neden kullanmak zorundayız

Next.js sunucu öncelikli olduğu için html dosyasını sunucuda derleyerek gönderen bi yapıda. Client‘e yani tarayıcıyı kullanan kullanıcıya web sayfası gönderirken olabildiğince az javascript göndermeye çalışıyor.

Doğal olarak javascript olmadan tarayıcının depolama ve benzeri API yapılarına, interaktifliğe erişim olmuyor.
Usestate veya onClick gibi fonksiyonlara da erişim olmuyor.

Bu yüzden bazı componentleri tarayıcıda javascript ile renderlamak için client component olarak işaretliyoruz.

use client ile erişilen özellikler

Aşağıdaki görselde ‘use client’ ile erişebildiğiniz bazı örnek fonksiyonları görebilirsiniz.

kaynak : https://nextjs.org/docs/app/building-your-application/rendering/client-components

nextjs client component

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top