Next.js’te getServerSideProps ve getStaticProps: Dinamik Web Uygulamalarının Sırrı

Merhaba arkadaşlar, Ben ChatGPT ve bu makalenin hazırlanmasında Mustafa ile birlikte çalıştık. Bugün sizlere Next.js’in önemli fonksiyonlarından getServerSideProps ve getStaticProps hakkında bilgi vereceğim.

getServerSideProps Fonksiyonu

getServerSideProps, bir Next.js sayfasının sunucu tarafında çalıştırılmasını sağlar. Bu, her istekte veri alma ve sayfanın her istek için yeniden oluşturulmasını sağlar. Yani, bu fonksiyon sayfa içeriğini oluşturmadan önce sunucu tarafında çalışır ve sayfayı oluşturmak için gerekli tüm verileri alır.

Bu fonksiyon genellikle veritabanından veya harici bir API’den veri almak için kullanılır. Verileri almak için getServerSideProps fonksiyonunu kullanmanın avantajı, her istekte güncel verileri alabilmenizdir. Ancak, bu özelliğin dezavantajı, her istekte verileri almanın, sayfanın yüklenme süresini uzatabileceğidir.

Örneğin, getServerSideProps kullanarak bir blog sayfası oluşturmak isterseniz, blog yazılarınızı her istekte veritabanından alabilirsiniz. Bu, her istekte güncel verileri almanızı sağlayacak, ancak sayfanın yüklenme süresini uzatacaktır.

getStaticProps Fonksiyonu

getStaticProps fonksiyonu, sayfa içeriğinin statik olarak oluşturulmasını sağlar. Bu, her istekte sayfanın yeniden oluşturulmasına gerek olmadığı anlamına gelir. Bu özellik, sayfanın bir kez oluşturulduktan sonra birden fazla kez kullanılmasını sağlar.

getStaticProps, verileri önceden alır ve sayfanın oluşturulmasından önce kullanılabilir hale getirir. Bu, sayfa oluşturulduktan sonra verileri güncellemek mümkün olmadığı anlamına gelir. Bu nedenle, bu yöntem genellikle verilerin sık sık değişmediği durumlarda kullanılır.

Örneğin, getStaticProps kullanarak bir e-ticaret web sitesi sayfası oluşturmak isterseniz, ürünlerinizin verilerini önceden alabilir ve bu verileri kullanarak sayfanızı oluşturabilirsiniz. Bu, sayfa yüklendiğinde hızlı bir şekilde verileri göstermenizi sağlayacaktır. Ancak, ürün verileriniz sık sık değişirse, bu yöntemi kullanmanız önerilmez.

Hangi Fonksiyonu Kullanmalısınız?

Hangi fonksiyonu kullanacağınız, sayfanın gereksinimlerine bağlıdır. Eğer sayfanızda sık sık değişen veriler varsa veya her istekte güncel verileri almanız gerekiyorsa, getServerSideProps fonksiyonunu kullanmalısınız. Ancak, sayfanızın verileri sık sık değişmiyorsa ve hızlı yükleme süresi önemliyse, getStaticProps fonksiyonunu kullanmanız önerilir.

Ayrıca, getStaticProps fonksiyonu aynı zamanda birçok önbellekleme özelliğiyle birlikte kullanılabilir. Bu, sayfanızın daha hızlı yüklenmesine ve sunucu yükünün azaltılmasına yardımcı olabilir.

Örnek Kullanım

Aşağıdaki örnek, getServerSideProps ve getStaticProps fonksiyonlarını kullanarak veri almanın nasıl yapılabileceğini göstermektedir.

getServerSideProps Örneği

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>Veri: {data}</h1>
    </div>
  );
}

Bu örnek, getServerSideProps fonksiyonunu kullanarak veri alır ve sayfa oluşturulmadan önce verileri kullanılabilir hale getirir. notFound özelliği, verilerin alınmadığı durumlarda 404 sayfası görüntülemek için kullanılabilir.

getStaticProps Örneği

export async function getStaticProps() {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data },
    revalidate: 60,
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>Veri: {data}</h1>
    </div>
  );
}

Bu örnek, getStaticProps fonksiyonunu kullanarak veri alır ve sayfanın statik olarak oluşturulmasını sağlar. revalidate özelliği, verilerin ne kadar sıklıkla güncelleneceğini belirtir. Bu örnekte, verilerin her 60 saniyede bir güncellenmesi sağlanır.

Sonuç

Next.js’teki getServerSideProps ve getStaticProps fonksiyonları, sayfa oluşturma, veri alma ve önbellekleme ile ilgili temel özelliklerdir. Bu fonksiyonların kullanımı, sayfanın gereksinimlerine ve verilerin ne kadar sıklıkla değiştiğine bağlıdır.

getServerSideProps fonksiyonu, her istekte güncel veri alma ve sayfanın her seferinde oluşturulmasını sağlamak için kullanılabilir. getStaticProps fonksiyonu ise verilerin sık sık değişmediği durumlarda önbellekleme özelliğiyle birlikte kullanılabilir, böylece sayfa daha hızlı yüklenir ve sunucu yükü azaltılır.

Yukarıdaki örnekler, bu fonksiyonların nasıl kullanılacağını ve temel yapılarını göstermektedir. Ancak, uygulamanızın gereksinimlerine bağlı olarak, fonksiyonları daha karmaşık hale getirmeniz gerekebilir. Örneğin, verileri farklı kaynaklardan veya birden fazla sayfada kullanmak isteyebilirsiniz.

Bu nedenle, Next.js dokümantasyonuna ve örneklerine başvurarak, projeniz için en uygun kullanımı belirlemeniz önerilir.