getServerSideProps

getServerSideProps bir Next.js fonksiyonudur ve istek anında veri almak ve bir sayfanın içeriğini oluşturmak için kullanılabilir.

Example

getServerSideProps adresini bir Sayfa Bileşeninden dışa aktararak kullanabilirsiniz. Aşağıdaki örnek, getServerSideProps adresindeki 3. taraf bir API'den nasıl veri getirebileceğinizi ve verileri sayfaya prop olarak nasıl aktarabileceğinizi göstermektedir:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps = (async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

When should I use getServerSideProps?

Kişiselleştirilmiş kullanıcı verilerine veya yalnızca istek sırasında bilinebilecek bilgilere dayanan bir sayfa oluşturmanız gerekiyorsa getServerSideProps adresini kullanmalısınız. Örneğin, authorization başlıkları veya coğrafi konum.

Verileri istek anında almanız gerekmiyorsa veya verileri ve önceden oluşturulmuş HTML'yi önbelleğe almayı tercih ediyorsanız getStaticProps.

Behavior

• getServerSideProps sunucu üzerinde çalışır.
• getServerSideProps yalnızca bir sayfadan dışa aktarılabilir.
• getServerSideProps JSON döndürür.
• Bir kullanıcı bir sayfayı ziyaret ettiğinde, getServerSideProps istek anında veri getirmek için kullanılır ve veriler sayfanın ilk HTML'sini oluşturmak için kullanılır.
• props Sayfa bileşenine aktarılan bilgiler istemcide ilk HTML'nin bir parçası olarak görüntülenebilir. Bu, sayfanın doğru şekilde hidratlanmasınısağlamak içindir. İstemcide bulunmaması gereken hassas bilgileri props adresine aktarmadığınızdan emin olun.
• Bir kullanıcı sayfayı şu yolla ziyaret ettiğinde next/link veya next/routerNext.js, getServerSideProps adresini çalıştıran sunucuya bir API isteği gönderir.
• İşlev sunucuda çalıştığından, getServerSideProps adresini kullanırken veri almak için bir Next.js API Rotası çağırmanız gerekmez. Bunun yerine, bir CMS, veritabanı veya diğer üçüncü taraf API'lerini doğrudan getServerSideProps içinden çağırabilirsiniz.

Bilmekte fayda var:

• getServerSideProps ile kullanılabilecek parametreler ve proplar için getServerSideProps API referansınabakın.
• Next.js'nin istemci tarafı paketinden neleri elediğini doğrulamak için next-code-elimination aracınıkullanabilirsiniz.

Error Handling

getServerSideProps içinde bir hata atılırsa, pages/500.js dosyasını gösterecektir. Nasıl oluşturulacağı hakkında daha fazla bilgi edinmek için 500 sayfasının belgelerine göz atın. Geliştirme sırasında bu dosya kullanılmayacak ve bunun yerine geliştirme hatası yer paylaşımı gösterilecektir.

Edge Cases

Edge Runtime

getServerSideProps hem Sunucusuz hem de Edge Runtimes ile kullanılabilir ve her ikisinde de prop'ları ayarlayabilirsiniz.

Ancak, şu anda Edge Runtime'da yanıt nesnesine erişiminiz yoktur. Bu, örneğin getServerSideProps adresine çerez ekleyemeyeceğiniz anlamına gelir. Yanıt nesnesine erişmek için, varsayılan çalışma zamanı olan Node.js çalışma zamanını kullanmaya devam etmelisiniz.

Örneğin, config adresini değiştirerek çalışma zamanını sayfa bazında açıkça ayarlayabilirsiniz:

export const config = {
  runtime: 'nodejs', // or "edge"
}
 
export const getServerSideProps = async () => {}

Caching with Server-Side Rendering (SSR)

Dinamik yanıtları önbelleğe almak için getServerSideProps içinde önbellek başlıklarını (Cache-Control) kullanabilirsiniz. Örneğin, kullanarak stale-while-revalidate.

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )
 
  return {
    props: {},
  }
}

Bununla birlikte, cache-control adresine ulaşmadan önce getStaticPropsISR ile kullanım durumunuz için daha uygundur.