İ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 client bileşeni bir server bileşenini import edemez: onu import etmek, sınırın diğer tarafına sürükler ve o da client kodu haline gelir. Bu yüzden insanlar etkileşimli bir sarmalayıcının (wrapper) içindeki her şeyin client kodu olması gerektiği sonucuna varırlar. Bu sonuç yanlıştır.

Bir client bileşeni, kendisine children olarak iletilen server içeriğini render edebilir.

Aralındaki fark, render işlemini kimin yaptığıdır. Bir server 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.

Küçük bir etkileşimli kabuğun (bir sekme çubuğu, bir modal, katlanabilir bir panel) büyük miktardaki yalnızca sunucuya özel içeriği, hiçbirini tarayıcıya taşımadan sarmalamasını sağlayan şey tam olarak budur. Etkileşimli kısım son derece küçük kalır; içerik ise sunucuda kalır.

Hatırlanması gereken yapı: client sarmalayıcıları, server dolguları.

Görev

Orta

components/Panel.jsx bir client bileşenidir (kilitli, okuyun): bir toggle butonu oluşturur ve yalnızca açık olduğunda children içeriğini gösterir.

Şu anda sayfa, detayları panelin içinde değil yanında oluşturuyor, bu nedenle toggle hiçbir şeyi kontrol etmiyor.

app/page.jsx dosyasında, <p id="details"> öğesini <Panel> etiketlerinin arasına children olarak yerleştirecek şekilde taşıyın.
Metni tam olarak olduğu gibi tutun ve app/page.jsx dosyasını server bileşeni olarak bırakın: bir direktif eklemeyin.

Paragraf hâlâ sunucuda oluşturulur. İstemci tarafındaki panel yalnızca bunun 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>
    );
}