Client-side Rendering (CSR)

React ile Client-Side Rendering'de (CSR), tarayıcı minimal bir HTML sayfasını ve sayfa için gereken JavaScript'i indirir. JavaScript daha sonra DOM'u güncellemek ve sayfayı işlemek için kullanılır. Uygulama ilk yüklendiğinde, kullanıcı sayfanın tamamını görmeden önce hafif bir gecikme fark edebilir, bunun nedeni tüm JavaScript indirilene, ayrıştırılana ve yürütülene kadar sayfanın tam olarak oluşturulmamasıdır.

Sayfa ilk kez yüklendikten sonra, aynı web sitesindeki diğer sayfalarda gezinmek genellikle daha hızlıdır, çünkü yalnızca gerekli verilerin getirilmesi gerekir ve JavaScript, tam sayfa yenileme gerektirmeden sayfanın bazı bölümlerini yeniden oluşturabilir.

Next.js'de, istemci tarafı oluşturmayı uygulayabileceğiniz iki yol vardır:

1. Sunucu tarafı oluşturma yöntemleri yerine sayfalarınızın içinde React'in useEffect() kancasını kullanmak (getStaticProps ve getServerSideProps).
2. İstemciden veri almak için SWR veya TanStack Query gibi bir veri getirme kütüphanesi kullanmak (önerilir).

İşte bir Next.js sayfası içinde useEffect() kullanımına bir örnek:

import React, { useState, useEffect } from 'react'
 
export function Page() {
  const [data, setData] = useState(null)
 
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }
 
    fetchData().catch((e) => {
      // handle the error as needed
      console.error('An error occurred while fetching the data: ', e)
    })
  }, [])
 
  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

Yukarıdaki örnekte, bileşen Loading... adresini oluşturarak başlar. Ardından, veriler alındıktan sonra, verileri yeniden işler ve görüntüler.

Her ne kadar useEffect adresinde veri getirme eski React uygulamalarında görebileceğiniz bir model olsa da, daha iyi performans, önbellekleme, iyimser güncellemeler ve daha fazlası için bir veri getirme kütüphanesi kullanmanızı öneririz. İşte istemciden veri almak için SWR kullanan minimum bir örnek:

import useSWR from 'swr'
 
export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )
 
  if (error) return <p>Failed to load.</p>
  if (isLoading) return <p>Loading...</p>
 
  return <p>Your Data: {data}</p>
}

Bildiğim iyi oldu:

CSR'nin SEO'yu etkileyebileceğini unutmayın. Bazı arama motoru tarayıcıları JavaScript'i çalıştırmayabilir ve bu nedenle uygulamanızın yalnızca ilk boş veya yükleme durumunu görebilir. Ayrıca, sayfanın tamamını görebilmeleri için tüm JavaScript'in yüklenmesini ve çalışmasını beklemeleri gerektiğinden, daha yavaş internet bağlantıları veya cihazları olan kullanıcılar için performans sorunlarına yol açabilir. Next.js, uygulamanızdaki her sayfanın ihtiyaçlarına bağlı olarak sunucu tarafı oluşturma, statik site oluşturma ve istemci tarafı oluşturmanın bir kombinasyonunu kullanmanıza olanak tanıyan karma bir yaklaşımı destekler. Uygulama Yönlendiricisi'nde, sayfa işlenirken bir yükleme göstergesi göstermek için Askıya Alma ile Yükleme Kullanıcı Arayüzü 'nü de kullanabilirsiniz.