İ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.

2. kuralı hatırla: yönerge tüm dosyayı işaretler. Sayfa ve başlık, açıklama, yemek listesi ve oluşturdukları her bileşen istemci koduna dönüşür; tarayıcıya indirilir ve tarayıcıda yeniden çalıştırılır. Tek bir düğme, tüm sayfayı sınırın ötesine taşıdı.

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 sunucu bileşeni istemci bileşenini işleyebilir: bu yön tamamen normaldir. İkinci olarak, sayfanın yapısı değişmedi; yalnızca küçük bir parça taşındı.

Seni aynı alışkanlığa yönelten ikinci bir hata daha var. Bir sunucu bileşenindeki düğmenin üzerine doğrudan onClick eklediğinde çalışma zamanı seni durdurur: Olay işleyicileri İstemci Bileşeni özelliklerine aktarılamaz. Bir işleyici bir işlevdir: istemci dosyasında bulunmadığı sürece tarayıcıya yapılan yolculuktan sağ çıkamaz.

Görev

Kolay

Bu sayfa, bir sunucu bileşeninin içindeki bir düğmeye onClick ekliyor; bu nedenle uygulama hiç işlenmeyecek.

Sayfayı istemci bileşeni olarak işaretlemeden düzeltin:

components/LikeButton.jsx içinde, durumunda beğeni sayısını tutan ve id="like" değerine sahip bir düğme oluşturan bir istemci bileşeni yazın ('use client' 1. satırda olmalı). Metni, ardından sayının geldiği Likes: olmalıdır.
app/page.jsx içinde bozuk düğmeyi silin ve yerine <LikeButton /> oluşturun. Bunu '../components/LikeButton' yolundan içe aktarın.
Başlığı ve sloganı tam olarak oldukları gibi bırakın: sayfa bir sunucu bileşeni olarak kalmalıdır.

Kendin dene

import './globals.css';

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

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