Client Components

İstemci Bileşenleri, istek anında istemcide işlenebilen etkileşimli kullanıcı arayüzü yazmanıza olanak tanır. Next.js'de istemci oluşturma isteğe bağlıdır, yani React' in istemcide hangi bileşenleri oluşturması gerektiğine açıkça karar vermeniz gerekir.

Bu sayfada İstemci Bileşenlerinin nasıl çalıştığı, nasıl oluşturulduğu ve ne zaman kullanabileceğiniz ele alınacaktır.

Benefits of Client Rendering

Render işini müşteri üzerinde yapmanın birkaç avantajı vardır:

Etkileşim: İstemci Bileşenleri durum, efekt ve olay dinleyicileri kullanabilir, yani kullanıcıya anında geri bildirim sağlayabilir ve kullanıcı arayüzünü güncelleyebilir.
Tarayıcı API'leri: İstemci Bileşenleri, coğrafi konum veya localStorage gibi tarayıcı API'lerine erişebilir ve belirli kullanım durumları için kullanıcı arayüzü oluşturmanıza olanak tanır.

Using Client Components in Next.js

İstemci Bileşenlerini kullanmak için, React "use client" yönergesini bir dosyanın en üstüne, içe aktarmalarınızın üzerine ekleyebilirsiniz.

"use client" Sunucu ve İstemci Bileşen modülleri arasında bir sınır bildirmek için kullanılır. Bu, bir dosyada bir "use client" tanımlayarak, alt bileşenler de dahil olmak üzere içine aktarılan diğer tüm modüllerin istemci paketinin bir parçası olarak kabul edildiği anlamına gelir.

app/counter.tsx

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Aşağıdaki diyagram, "use client" yönergesi tanımlanmamışsa, onClick ve useState bileşenlerinin iç içe geçmiş bir bileşende (toggle.js) kullanılmasının bir hataya neden olacağını göstermektedir. Bunun nedeni, varsayılan olarak bileşenlerin bu API'lerin kullanılamadığı sunucuda render edilmesidir. toggle.js içinde "use client" yönergesini tanımlayarak, React'e bileşeni ve alt bileşenlerini API'lerin mevcut olduğu istemcide render etmesini söyleyebilirsiniz.

Use Client Directive and Network Boundary

Birden fazla use client giriş noktası tanımlama:

React Bileşen ağacınızda birden fazla "istemci kullan" giriş noktası tanımlayabilirsiniz. Bu, uygulamanızı birden fazla istemci paketine (veya dalına) ayırmanıza olanak tanır.

Ancak, "use client" adresinin istemcide işlenmesi gereken her bileşende tanımlanması gerekmez. Sınırı tanımladıktan sonra, içine aktarılan tüm alt bileşenler ve modüller istemci paketinin bir parçası olarak kabul edilir.

How are Client Components Rendered?

Next.js'de İstemci Bileşenleri, isteğin tam sayfa yüklemesinin (uygulamanıza yapılan ilk ziyaret veya tarayıcı yenilemesiyle tetiklenen sayfa yeniden yüklemesi) bir parçası olmasına veya sonraki bir gezintiye bağlı olarak farklı şekilde oluşturulur.

Full page load

İlk sayfa yüklemesini optimize etmek için Next.js, hem İstemci hem de Sunucu Bileşenleri için sunucuda statik bir HTML önizlemesi oluşturmak üzere React'in API'lerini kullanacaktır. Bu, kullanıcı uygulamanızı ilk ziyaret ettiğinde, istemcinin İstemci Bileşeni JavaScript paketini indirmesini, ayrıştırmasını ve yürütmesini beklemek zorunda kalmadan sayfanın içeriğini hemen göreceği anlamına gelir.

Sunucuda:

React, Sunucu Bileşenlerini, İstemci Bileşenlerine referanslar içeren React Sunucu Bileşeni Yükü (RSC Payload) adı verilen özel bir veri biçiminde işler.
Next.js, sunucuda rota için HTML oluşturmak üzere RSC Payload ve Client Component JavaScript talimatlarını kullanır.

Sonra, müşteride:

HTML, rotanın etkileşimli olmayan hızlı bir ilk önizlemesini hemen göstermek için kullanılır.
React Sunucu Bileşenleri Yükü, İstemci ve Sunucu Bileşen ağaçlarını uzlaştırmak ve DOM'u güncellemek için kullanılır.
JavaScript talimatları İstemci Bileşenlerini sulandırmak ve kullanıcı arayüzlerini etkileşimli hale getirmek için kullanılır.

Hidrasyon nedir?

Hidrasyon, statik HTML'yi etkileşimli hale getirmek için DOM'a olay dinleyicileri ekleme işlemidir. Perde arkasında, hidrasyon şu şekilde yapılır hydrateRoot React API.

Subsequent Navigations

Sonraki gezinmelerde, İstemci Bileşenleri sunucu tarafından işlenen HTML olmadan tamamen istemcide işlenir.

Bu, İstemci Bileşeni JavaScript paketinin indirildiği ve ayrıştırıldığı anlamına gelir. Paket hazır olduğunda, React, İstemci ve Sunucu Bileşen ağaçlarını uzlaştırmak ve DOM'u güncellemek için RSC Payload'u kullanacaktır.

Going back to the Server Environment

Bazen, "use client" sınırını ilan ettikten sonra, sunucu ortamına geri dönmek isteyebilirsiniz. Örneğin, istemci paketinin boyutunu küçültmek, sunucudan veri almak veya yalnızca sunucuda kullanılabilen bir API kullanmak isteyebilirsiniz.

İstemci ve Sunucu Bileşenleri ile Sunucu Eylemlerini iç içe geçirerek teorik olarak İstemci Bileşenleri içinde yuvalanmış olsa bile kodu sunucuda tutabilirsiniz. Daha fazla bilgi için Kompozisyon Kalıpları sayfasına bakın.