İstemci İçinde Sunucu

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

Neredeyse herkesin yanlış bildiği kural işte budur ve sunucuyu ne kadar zorlayabileceğinizi belirleyen kural da tam olarak budur.

Bir istemci bileşeni bir sunucu bileşenini içe aktaramaz: onu içe aktarmak, bileşeni sınırın ötesine taşır ve o da istemci koduna dönüşür. Bu nedenle insanlar etkileşimli bir sarmalayıcının içindeki her şeyin istemci kodu olması gerektiği sonucuna varır. Bu sonuç yanlıştır.

Bir istemci bileşeni, kendisine children olarak iletilen sunucu içeriğini oluşturabilir.

Farkı yaratan, işleme işlemini kimin yaptığıdır. Bir sunucu sayfası şunu yazdığında:

<Panel>
    <Details />
</Panel>

…server, <Details /> bileşenini işler (render eder) ve tamamlanmış sonucu bir prop olarak Panel bileşenine verir. Panel onu asla import etmez, asla çalıştırmaz: sadece nereye koyacağına karar verir. client bileşeni açısından bakıldığında, children zaten tamamlanmış bir UI parçasıdır.

Bu, küçük bir etkileşimli kabuğun (sekme şeridi, modal, daraltılabilir panel) sunucuya özel büyük miktarda içeriği bunların hiçbirini tarayıcıya taşımadan sarmalamasını sağlar. Etkileşimli kısım küçük kalır; içerik sunucuda kalır.

Hatırlanması gereken şekil: istemci sarmalayıcıları, sunucu doldurmaları.

Görev

Orta

components/Panel.jsx bir istemci bileşenidir (kilitli, okuyun): bir geçiş düğmesi oluşturur ve children öğesini yalnızca açıkken gösterir.

Şu anda sayfa, ayrıntıları panelin yanında oluşturuyor; panelin içinde oluşturmadığı için geçiş düğmesi hiçbir şeyi kontrol etmiyor.

app/page.jsx içinde <p id="details"> öğesini <Panel> etiketlerinin arasına, alt öğesi olacak şekilde taşıyın.
Metni olduğu gibi koruyun ve app/page.jsx dosyasını bir sunucu bileşeni olarak bırakın: yönerge eklemeyin.

Paragraf hâlâ sunucuda oluşturulur. İstemci paneli yalnızca gösterilip gösterilmeyeceğine karar verir.

Kendin dene

import './globals.css';

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

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