Static Site Generation (SSG)

Examples

Bir sayfa Statik Oluşturma kullanıyorsa, sayfa HTML'si derleme zamanında oluşturulur. Bu, üretimde next build adresini çalıştırdığınızda sayfa HTML'sinin oluşturulduğu anlamına gelir. Bu HTML daha sonra her istekte yeniden kullanılır. Bir CDN tarafından önbelleğe alınabilir.

Next.js'de, veri içeren veya içermeyen sayfaları statik olarak oluşturabilirsiniz. Her iki duruma da bir göz atalım.

Static Generation without data

Varsayılan olarak Next.js, veri getirmeden Static Generation kullanarak sayfaları önceden oluşturur. İşte bir örnek:

function About() {
  return <div>About</div>
}
 
export default About

Bu sayfanın önceden oluşturulmak için herhangi bir harici veri getirmesine gerek olmadığını unutmayın. Bu gibi durumlarda Next.js, derleme sırasında sayfa başına tek bir HTML dosyası oluşturur.

Static Generation with data

Bazı sayfalar, ön işleme için harici verilerin alınmasını gerektirir. İki senaryo vardır ve biri ya da her ikisi de geçerli olabilir. Her iki durumda da Next.js'nin sağladığı bu işlevleri kullanabilirsiniz:

  1. Sayfa içeriğiniz harici verilere bağlıdır: getStaticProps adresini kullanın.
  2. Sayfa yollarınız harici verilere bağlıdır: getStaticPaths adresini kullanın (genellikle getStaticProps adresine ek olarak).

Scenario 1: Your page content depends on external data

Örnek: Blog sayfanızın bir CMS'den (içerik yönetim sistemi) blog yazılarının listesini getirmesi gerekebilir.

// TODO: Need to fetch `posts` (by calling some API endpoint)
//       before this page can be pre-rendered.
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

Render öncesi bu verileri almak için Next.js, aynı dosyadan getStaticProps adlı bir async işlevini export yapmanıza olanak tanır. Bu işlev derleme sırasında çağrılır ve getirilen verileri ön render sırasında sayfanın props adresine aktarmanızı sağlar.

export default function Blog({ posts }) {
  // Render posts...
}
 
// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

getStaticProps adresinin nasıl çalıştığı hakkında daha fazla bilgi edinmek için Veri Getirme belgelerine göz atın.

Scenario 2: Your page paths depend on external data

Next.js dinamik rotalara sahip sayfalar oluşturmanıza olanak tanır. Örneğin, id adresini temel alan tek bir blog gönderisini göstermek için pages/posts/[id].js adlı bir dosya oluşturabilirsiniz. Bu, posts/1 adresine eriştiğinizde id: 1 ile bir blog yazısı göstermenizi sağlayacaktır.

Dinamik yönlendirme hakkında daha fazla bilgi edinmek için Dinamik Yönlendirme belgelerine bakın.

Ancak, derleme zamanında hangi id adresini önceden işlemek istediğiniz harici verilere bağlı olabilir.

Örnek: veritabanına yalnızca bir blog yazısı ( id: 1 ile) eklediğinizi varsayalım. Bu durumda, derleme sırasında yalnızca posts/1 adresini önceden işlemek istersiniz.

Daha sonra, id: 2 ile ikinci gönderiyi ekleyebilirsiniz. O zaman posts/2 adresini de önceden işlemek isteyebilirsiniz.

Dolayısıyla, önceden oluşturulmuş sayfa yollarınız harici verilere bağlıdır. Bunun üstesinden gelmek için Next.js, dinamik bir sayfadan (bu durumdapages/posts/[id].js ) getStaticPaths adlı bir async işlevine export izin verir. Bu işlev derleme zamanında çağrılır ve hangi yolların önceden işlenmesini istediğinizi belirtmenize olanak tanır.

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

Ayrıca pages/posts/[id].js adresinde, getStaticProps adresini dışa aktarmanız gerekir, böylece bu id ile gönderi hakkındaki verileri alabilir ve sayfayı önceden işlemek için kullanabilirsiniz:

export default function Post({ post }) {
  // Render post...
}
 
export async function getStaticPaths() {
  // ...
}
 
// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  // Pass post data to the page via props
  return { props: { post } }
}

getStaticPaths adresinin nasıl çalıştığı hakkında daha fazla bilgi edinmek için Veri Getirme belgelerine göz atın.

When should I use Static Generation?

Sayfanız bir kez oluşturulup CDN tarafından sunulabildiği için mümkün olduğunca Statik Oluşturma (verili ve verisiz) kullanmanızı öneririz, bu da her istekte bir sunucunun sayfayı oluşturmasından çok daha hızlıdır.

Statik Üretimi, aşağıdakiler de dahil olmak üzere birçok sayfa türü için kullanabilirsiniz:

Kendinize sormalısınız: "Bu sayfayı kullanıcının isteğinden önce oluşturabilir miyim?" Cevabınız evet ise Statik Oluşturmayı seçmelisiniz.

Öte yandan, kullanıcının isteğinden önce bir sayfayı önceden oluşturamıyorsanız Statik Oluşturma iyi bir fikir değildir. Belki de sayfanız sık güncellenen verileri gösteriyordur ve sayfa içeriği her istekte değişiyordur.

Bu gibi durumlarda aşağıdakilerden birini yapabilirsiniz: