İstemci Parçalarını Küçük Tutma

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 20 / 47.

Bir sayfanın etkileşimli bir düğmeye ihtiyacı olduğunda cazip bir kısayol vardır: sayfanın en üstüne 'use client' ekleyip geçmek. Bu çalışır. Ancak aynı zamanda Next.js'in size az önce sunduğu her şeyi çöpe atmanın en yaygın yoludur.

Kural 2'yi hatırlayın: direktif tüm dosyayı işaretler. Sayfayı işaretlediğinizde başlık, açıklama, yemek listesi ve onların işlediği her `component` tarayıcıda indirilen ve yeniden çalıştırılan `client` koduna dönüşür. Tek bir `button` tüm sayfayı sınırın diğer tarafına çekti.

Bunu düzelten alışkanlık küçük ve mekaniktir:

'use client' directive'ini en uç bileşenlere (leaf'lere) itin.

Etkileşimli kısmı kendi küçük dosyasına çekin, o dosyayı işaretleyin ve sayfanın sunucuda kalmasını sağlayın:

// app/page.jsx - hâlâ bir sunucu bileşeni
import LikeButton from '../components/LikeButton';

export default function Home() {
    return (
        <main>
            <h1>Coddy Eats</h1>
            <LikeButton />
        </main>
    );
}

Dikkat edilmesi gereken iki şey var. İlk olarak, bir server componenti bir client componenti render edebilir: bu yön tamamen normaldir. İkinci olarak, page şekil değiştirmedi; yalnızca küçük bir parça taşındı.

Sizi aynı alışkanlığa yönlendiren ikinci bir hata daha var. Bir server bileşenindeki bir button üzerine doğrudan bir onClick koyduğunuzda çalışma zamanı sizi durdurur: Event handlers cannot be passed to Client Component props. Bir handler bir fonksiyondur: bir client dosyasında yaşamadığı sürece tarayıcıya olan yolculuktan sağ çıkamaz.

Görev

Kolay

Bu sayfa, bir sunucu bileşeni (server component) içindeki bir düğmeye onClick yerleştirir, bu nedenle uygulama hiçbir şekilde işlenmeyecektir (render edilmeyecektir).

Sayfayı bir istemci bileşeni (client component) olarak işaretlemeden bunu düzeltin:

components/LikeButton.jsx dosyasında, bir beğeni sayısını state içinde tutan ve id="like" olan bir düğme oluşturan bir istemci bileşeni (1. satırda 'use client') yazın. Metni Likes: ve ardından sayı olmalıdır.
app/page.jsx dosyasında, bozuk düğmeyi silin ve bunun yerine <LikeButton /> bileşenini ekleyin. Onu '../components/LikeButton' konumundan import edin.
Başlığı ve tagline kısmını aynen bırakın: sayfanın bir sunucu bileşeni (server component) olarak kalması gerekir.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}