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.