Nextjs, JavaScript tabanlı bir web uygulama geliştirme çerçevesidir Reactjs kütüphanesi üzerine kurulmuştur ve hem client-side rendering CSR hem de server-side rendering SSR işlemi yapabilme özelliğine sahiptir
SSR, web sayfalarının sunucu tarafında oluşturulduğu bir yöntemdir Bu yöntem, sayfanın tarayıcıda yüklenmesini bekleyerek yapılan CSR ile karşılaştırıldığında, kullanıcılara sayfanın daha hızlı yüklenmesini sağlamaktadır Bu hızlı yükleme, performans ve SEO açısından büyük avantajlar sağlamaktadır SSR, geleneksel olarak kullanılan CSR yönteminin tam tersidir CSR'da ise web sayfanın HTML kodu tarayıcıda oluşturulur Bu da daha yavaş yükleme süreleri ve SEO dostu olmayan bir yapıya neden olur
Birçok geliştirici, SSR işleminin SEO ve performans açısından daha avantajlı olduğunu düşünmektedir Bu nedenle, Nextjs'in SSR özellikleri bu

Next.js, JavaScript tabanlı bir web uygulama geliştirme çerçevesidir. React.js kütüphanesi üzerine kurulmuştur ve hem client-side rendering (CSR) hem de server-side rendering (SSR) işlemi yapabilme özelliğine sahiptir.

Birçok geliştirici, SSR işleminin SEO ve performans açısından daha avantajlı olduğunu düşünmektedir. Bu nedenle, Next.js'in SSR özellikleri bu avantajları sağlamaya yardımcı olmaktadır. Yine de, CSR özellikleri, bir web uygulamasının ilk yüklenme süresini azaltmada etkilidir.

Next.js'in dinamik yükleme özellikleri de oldukça gelişmiştir. getStaticProps, getServerSideProps ve getStaticPaths fonksiyonları gibi özellikleri sayesinde, dinamik olarak yüklenen verilerin yönetimi daha kolay hale gelmiştir.

Bu makalenin ilerleyen kısımlarında, SSR ve CSR işlemlerinin farkları ve avantajları, Next.js'in SSR ve CSR özelliklerinin açıklaması, dinamik olarak yüklenen verilerin SSR ile yüklenmesinin avantajları, ve Next.js ile yapılabilecek örnek bir uygulama hakkında daha fazla bilgi bulabilirsiniz.

Server-side Rendering (SSR) Nedir?

Server-side rendering (SSR), web sayfalarının sunucu tarafından oluşturulduğu bir işlem türüdür. Bu yöntemde, web sayfası isteği alındığında sunucu tarafından HTML sayfası oluşturulur ve bu sayfa kullanıcı tarayıcısına gönderilir. Bu işlemle birlikte sayfa, tarayıcıya daha kullanıcı dostu, hızlı ve SEO dostu bir şekilde sunulur.

SSR, geleneksel olarak kullanılan client-side rendering (CSR) yönteminin tam tersidir. CSR'da ise web sayfanın HTML kodu tarayıcıda oluşturulur. Bu da daha yavaş yükleme süreleri ve SEO dostu olmayan bir yapıya neden olur.

SSR, performans açısından da bir avantaj sağlar. Yüksek trafikli bir web sitesinde kullanıldığında, sunucu tarafından üretilen sayfa daha hızlı bir şekilde yüklenir ve bu da kullanıcı deneyimini arttırır. Ayrıca, arama motorlarının sayfayı dizine eklemesi kolaylaşır ve SEO sıralamaları yükselir.

Özetle, SSR ile web sayfaları daha iyi performans, kullanıcı deneyimi ve SEO sıralamaları sunuyor. Bu nedenle, özellikle yüksek trafikli web sitelerinde kullanılması önerilir.

Client-side Rendering (CSR) Nedir?

Client-side rendering (CSR), web sayfalarında kullanıcının tarayıcısında (client-side) çalışan bir rendering işlemidir. Yani sayfa, web sunucusundan gelen veriler ve kodlar ile beraber kullanıcının tarayıcısında çalışan bir JavaScript kütüphanesi/çerçevesi sayesinde client-side'ta oluşturulur. Bu sayede, tüm HTML, CSS, ve JavaScript dosyaları bir kere indirilir ve sonrasında sadece gerekli veriler istenildiği zaman sunucudan yüklenir. Bu da, hem ilk yükleme süresini düşürür, hem de kullanıcı deneyimini arttırır.

Client-side rendering ideal olarak single-page uygulamalarda kullanılır. Çünkü bir kez sayfa yüklendikten sonra sadece değişen veriler client-side'ta yüklenir ve ek server-side isteklerine gerek kalmaz. Bu da, sayfa çıkış hızını arttırır ve sunucunun yükünü azaltır. CSR, aynı zamanda web uygulamasının web sunucusuna bağlı olmadan da çalışmasını sağlar. Bu yüzden, offline kullanım ve native uygulama geliştirmek için de kullanılabilir.

• Client-side rendering avantajları:
• - Daha dinamik ve interaktif web uygulamaları görüntülenebilir.
• - Daha yüksek performans ve hızlı yükleme süresi sağlar.
• - Sunucu yükünü azaltır ve daha düşük hosting maliyetleri.
• - Sadece gerekli verilerin indirilmesi, bandwidth kullanımını azaltır.

SSR ve CSR Karşılaştırması

Next.js, server-side rendering (SSR) ve client-side rendering (CSR) yöntemleriyle web uygulamalarının oluşturulabilmesine olanak tanıyor. SSR, her istekte sunucu tarafından sayfa oluşturulması anlamına gelirken, CSR ise sayfanın başka bir kaynaktan yüklenip, yerel olarak çalıştırılmasını sağlar. Bu yöntemler arasındaki farklar, birçok açıdan karşılaştırılabilir.

SSR yöntemi, web uygulamalarının SEO açısından daha iyi sıralamalarda yer almasını sağlar. İlk yükleme sürelerinin daha hızlı olması ve kullanıcı deneyimindeki gecikmelerin minimize edilmesi de SSR'in avantajları arasındadır. Ancak, her istekte sunucunun veri oluşturması, özellikle dinamik verilerdeki çekişmeler nedeniyle performans kaybına neden olabilir.

CSR yöntemi, ilk yükleme sürelerinde daha hızlı bir performans ve daha iyi bir kullanıcı deneyimi sunar. Yerel olarak çalıştırıldığı için sunucunun yükü önemli ölçüde hafifler. Ancak, SEO açısından dezavantajlıdır ve erişilebilirlikte sorunlar yaşanabilir.

Birçok durumda, uygulamanın gereksinimleri hangi yöntemin kullanılacağına karar verecektir. Sayfa içeriği sürekli değişiyorsa veya dinamik verilerle çalışıyorsa, CSR yöntemi daha iyi bir seçim olabilir. Ancak, SEO ve performans gibi faktörlerin daha önemli olduğu durumlarda, SSR yöntemi daha uygun olabilir.

SEO ve Performans Açısından SSR Avantajları

Server-side rendering (SSR), web sayfalarının sunucu tarafında oluşturulduğu bir yöntemdir. Bu yöntem, sayfanın tarayıcıda yüklenmesini bekleyerek yapılan client-side rendering (CSR) ile karşılaştırıldığında, kullanıcılara sayfanın daha hızlı yüklenmesini sağlamaktadır. Bu hızlı yükleme, performans ve SEO açısından büyük avantajlar sağlamaktadır.

SSR ile oluşturulan sayfalar, tarayıcılara hızlı bir şekilde yüklenebilmektedir. Bu sayede kullanıcılar, siteye daha hızlı bir şekilde erişebilmekte ve daha az beklemek zorunda kalmaktadır. Hızlı yükleme, SEO açısından da büyük bir avantajdır. Arama motorları, web sayfalarının hızlı olmasını bevor etmektedir ve SSR ile oluşturulan sayfalar, daha hızlı yüklendiği için arama motorlarında daha üst sıralara çıkmaya daha elverişlidirler.

Next.js'in server-side rendering özelliği, sitenin daha hızlı yüklenerek daha iyi bir performans sergilemesini sağlamaktadır. Bu özellik sayesinde, kullanıcılar daha hızlı bir site deneyimi yaşarken, arama motorları da sitenin daha üst sıralarda yer almasına katkı sağlamaktadır.

Next.js'in SSR Özellikleri

Next.js, server-side rendering (SSR) özelliği sunan bir JavaScript framework'üdür. Bu özellik, web sayfasının sunucu tarafında oluştuğu için sayfanın kullanıcılar tarafından daha hızlı görüntülenmesini sağlar. SSR özelliği, kullanıcılar tarafından görüntülenecek olan tüm HTML, CSS ve JavaScript kodlarını sunucu tarafında oluşturur.

Next.js, sunucu tarafında yapılan işlemi optimize etmek için verimli bir HTML sentaksı sunar ve bu sayede web sayfası daha hızlı bir şekilde oluşturulur. SSR özelliği ayrıca, web sayfasının önemli kısımlarının arama motorları tarafından daha iyi görüntülenmesine yardımcı olur ve bu sayede SEO açısından önemli bir avantaj sağlar.

Next.js'in SSR özelliği sayesinde, kullanıcının web sayfasındaki herhangi bir işlem yapmasına gerek kalmadan sayfa daha hızlı yüklenir. Bu durum, kullanıcı deneyimi için oldukça önemlidir ve Next.js ile birlikte sunucu tarafında yapılan işlemler sayesinde daha iyi bir kullanıcı deneyimi sağlanır.

Ayrıca, Next.js'in SSR özelliği sayesinde web sayfasının performansı artar ve kullanıcılar tarafından daha hızlı görüntülenir. Bu özellik, özellikle zamanla değişen verilerin bulunduğu web sayfaları için büyük bir avantaj sağlar.

CSR Özellikleriyle Karşılaştırma

Next.js'in client-side rendering (CSR) yöntemi de server-side rendering'e (SSR) alternatif bir yöntem olarak kullanılabiliyor. Ancak, SSR ile karşılaştırıldığında bazı farklılıkları ve dezavantajları bulunuyor.

Birinci dezavantajı, CSR'nin ilk yükleme süresinde daha yavaş olmasıdır. Bu, sayfaya girdiğinizde tüm içeriğin ve verilerin tamamının tarayıcınıza yüklenmesi anlamına gelir. Bu nedenle, sayfa açılış hızı daha düşüktür ve SEO sonuçlarına da etki edebilir.

Ayrıca, CSR ile kullanıcıların tarayıcıda çalışan bir uygulamayla etkileşime girmeleri gereklidir. Bu nedenle, performansı cihaza göre değişiklik gösterebilir ve özellikle yavaş cihazlar için uygun olmayabilir.

SSR ise, kullanıcıya sunulmadan önce sunucuda işlenir ve tarayıcıya gönderilir. Bu nedenle, sayfa açılış hızı daha hızlıdır ve SEO açısından da iyidir. Ayrıca, tarayıcıya gönderilen sayfa HTML, CSS ve JavaScript kodlarının tamamını içermez, bu nedenle sayfa boyutları daha küçüktür ve performans daha iyi olabilir.

Next.js, server-side rendering özelliği ile CSR'den daha iyi bir performansa sahip olabilir. Ancak, dinamik olarak yüklenen içeriklerde CSR kullanımı daha yararlıdır. Bu nedenle, hangi yöntemin kullanılması gerektiği uygulamanın özelliklerine göre değişebilir.

İlk Yükleme Süresi Açısından CSR Avantajları

Client-side rendering (CSR), sayfa yüklenirken HTML, CSS ve JavaScript kodlarının tarayıcı tarafından oluşturulduğu bir işlem türüdür. Bu, kullanıcının sayfa yüklemesini beklemesi gerektiği anlamına gelir. Ancak, bir kez yüklendikten sonra, web uygulaması kullanıcının etkileşimiyle hızlı bir şekilde çalışabilir. İlk yükleme süresi açısından, CSR'nin bazı avantajları vardır.

• İlk sayfa yükleme süresi düşüktür ve sayfa değişiklikleri daha hızlı gerçekleştirilebilir.
• Web uygulaması, sunucu taraflı işlem gücünden bağımsız olarak düzgün çalışabilir.

CSR kullanımının daha az geliştirici kısıtlaması olduğundan, daha dinamik ve interaktif arayüzler oluşturmak için mükemmeldir. Ancak, CSS ve JavaScript dosyalarının boyutları büyük olduğunda, kullanıcının ilk yükleme süresi uzun olabilir.

Özetle, ilk yükleme süresi CSR'de düşüktür ve daha dinamik bir kullanıcı deneyimi yaratmak için kullanışlıdır. Ancak, büyük dosya boyutları nedeniyle yüksek hacimli trafikte yavaşlama yaşanabilir. Bu nedenle, web uygulamanızın ihtiyaçlarına ve kullanıcılarınıza en uygun rendering yöntemi seçilmelidir.

Dinamik Olarak Yüklenen Verilerin SSR ile Yüklenmesi

Dinamik olarak yüklenen verilerin Next.js'de nasıl SSR ile yüklenebileceğini anlatmadan önce, dinamik yükleme konseptinin ne olduğunu açıklamak gerekir. Dinamik yükleme, kullanıcının sayfayı ziyaret ettiği anda tüm içeriğin yüklenmek yerine, sayfa üzerindeki bir bölümün gerektiği zaman yüklenmesi anlamına gelir. Bu, sayfanın yüklenme süresini ve kullanıcının deneyimini önemli ölçüde etkileyen önemli bir faktördür.

SSR, özellikle yüklenme süresi ve performans açısından büyük önem taşıyan dinamik yükleme işleminin çözümüdür. SSR sayesinde, sayfanın sunucuda oluşturulması ve daha sonra istemciye gönderilmesi sağlanır. Bu, istemci tarafında gerçekleşen yüklenme süresini azaltır ve sayfanın hemen verilere erişebilmesini sağlar.

Next.js, dinamik olarak yüklenen verilerin SSR ile yüklenmesine olanak tanıyan bir dizi özellik sunar. Bunlar arasında, getStaticProps, getServerSideProps ve getStaticPaths fonksiyonları yer alır. Bu özellikler, sayfa oluşturulurken verilerin sunucuda yüklenmesini sağlar ve gerektiğinde istemciye gönderilir. Bu sayede, kullanıcılar sayfayı daha hızlı bir şekilde yükleyebilir ve verilere daha hızlı bir şekilde erişebilirler.

SSR ile dinamik yükleme kullanmanın avantajları arasında, hızlı yükleme süresi, daha iyi performans ve daha iyi SEO değeri yer alır. Bu nedenle, Next.js gibi modern web uygulamaları geliştirmek için kullanılan araçlarla, dinamik yükleme özelliklerini kullanmayı ve SSR ile yüklemeyi tercih etmek en mantıklı seçeneklerden biridir.

Next.js'in Dinamik Yükleme Özellikleri

Next.js, dinamik yükleme özelliği ile dinamik içeriği hızlı ve verimli bir şekilde sunar. Bu özellik, kullanıcının sayfayı açtığında tüm içeriğin yüklenmesine gerek kalmadan, gerektiği zamanlarda içeriği yükler. Bu özellik sayesinde sayfa yükleme hızı ve performans artar.

Next.js, dinamik yükleme özelliği için getStaticProps, getServerSideProps ve getStaticPaths fonksiyonlarını kullanır. Bu fonksiyonlar sayesinde dinamik içerikler yüklenir ve sayfa yeniden yüklenmeden içerik güncellenir.

getStaticProps fonksiyonu, sayfalarınızın statik olarak oluşturulmasına olanak tanır ve içerikleri başlangıçta sunar. Bu özelliği kullanarak, site performansınızı artırabilir ve sunucu yükünü azaltabilirsiniz.

getServerSideProps fonksiyonu, her istek için sunucu tarafında verilerin oluşturulmasına izin verir. Bu özellik, dinamik veya kullanıcı tarafından oluşturulan içerikler için kullanışlıdır.

getStaticPaths fonksiyonu, siteyi daha kullanıcı dostu hale getirir. Bu özellikle, kullanıcının istediği verileri çekmek için dinamik URL oluşturabilirsiniz.

Next.js, tüm bu özellikleri sayesinde dinamik içeriklerin hızlı ve verimli bir şekilde sunulmasını sağlar. Bu özellikle, sayfa yüklenme hızınızda önemli bir gelişme sağlayabilirsiniz.

getStaticProps Fonksiyonu

Next.js kullanıcılarına sunmuş olduğu özellikler arasında getStaticProps fonksiyonu da yer almaktadır. Bu fonksiyon sayesinde Next.js, sayfayı oluşturmadan önce verileri alarak hazırlanmış olan bir statik siteyi hızlı bir şekilde oluşturabilir. Bu durum sayfanın yavaş yüklenmesinin engellenmesini sağlar.

GetStaticProps fonksiyonu, statik olarak hazırlanmış bir sayfada verilerin dinamik olarak değiştiği durumlar için kullanılabilir. Veriler değiştiğinde, getStaticProps fonksiyonu otomatik olarak yenilenerek sayfanın güncel verilerle oluşturulmasını sağlar.

GetStaticProps fonksiyonu, kullanıcıya özelleştirilebilir seçenekler sunar. Bu seçenekler sayesinde, sayfanın yenilenme sıklığı ve yenilenme şekli belirlenebilir. Böylelikle, sayfanın daha hızlı ya da daha yavaş yenilenmesi sağlanabilir. Ayrıca, getStaticProps fonksiyonu kullanarak sayfalar arasında veri paylaşımı da mümkündür.

Özellik	Açıklama
revalidate	getStaticProps fonksiyonu, sayfanın yenilenme sıklığını belirlemek için kullanılabilir. revalidate özelliği ile, yenilenme sıklığı belirlenir. Örneğin; 10 saniyede bir yenilenmesi istenilen bir sayfada revalidate:10 kullanılır.
fallback	getStaticProps fonksiyonu, sayfanın yenilenme şeklini belirlemek için kullanılabilir. fallback özelliği ile, sayfanın hangi durumda yenileneceği belirlenebilir. Örneğin; fallback:true olarak belirlenirse, sayfa yeniden oluşturulamadığında, talep geldiğinde otomatik olarak yeniden oluşturulur.

GetStaticProps fonksiyonu, Next.js projesinde statik sayfalar oluşturulurken kullanılan en önemli fonksiyonlardan biridir. Dinamik olarak değişen verileri sayfada hızlı ve etkili bir şekilde görüntüleyebilmek için, getStaticProps fonksiyonunu kullanmak oldukça önemlidir.

getServerSideProps Fonksiyonu

GetServerSideProps fonksiyonu, Next.js tarafından sunulan bir özelliktir ve server-side rendering işleminde kullanılan bir yöntemdir. Bu fonksiyon, işlevsel olarak bir HTTP talebi sırasında sunucu tarafında çalıştırılan bir JavaScript fonksiyonudur. Bu sayede, HTML sayfalarının istemciye gönderilmeden önce sunucuda hazırlanmasına olanak tanır.

Bu fonksiyon, tüm isteklerde her zaman çalıştırılır ve getStaticProps fonksiyonundan farklı olarak, her istekte farklı bir çıktı gönderilebilir. Yani, kullanıcıların taleplerine bağlı olarak farklı veriler sunulabilir. Bu özellik, tahmin edilemeyen veya hızlı değişen verilerin olduğu sayfalarda çok yararlıdır.

GetServerSideProps fonksiyonu, bir nesne döndürür ve bu nesne, component props olarak aktarılır. Bu nesne, component'in aldığı tüm propslarla birlikte kullanılabilir. Ayrıca, bu fonksiyonun döndürdüğü nesne, veritabanı bağlantıları gibi sunucu tarafında yapılması gereken işlemleri de içerebilir.

Özetle, GetServerSideProps fonksiyonu, Next.js'in server-side rendering özelliğinin bir parçasıdır ve dinamik verileri sunmak için kullanılır. Bu fonksiyon, her istekte sunucuda çalışır ve tüm isteklerde farklı bir çıktı üretebilir. Ayrıca, bu fonksiyonun döndürdüğü nesne, component props olarak kullanılabilir ve veritabanı bağlantıları gibi sunucu tarafında yapılması gereken işlemleri de içerebilir.

getStaticPaths Fonksiyonu

getStaticPaths Fonksiyonu

Next.js'in dinamik yükleme özelliği, belirli bir sayfa yolu için getStaticPaths fonksiyonunun kullanımıyla gerçekleştirilebilir. getStaticPaths, olası yolların listesini döndürür ve bu yollar parametrelerle belirtilebilir

Bu fonksiyon, Static Site Generation (SSG) yöntemi kullanılarak çalışır. Birinci özel durum, hazır olmayan sayfaların yaratılmasıdır. getStaticPaths, beklenen olası sayfa yollarının listesiyle çıktı verir, ayrıca sayfaların verilerinin hazırlanması için gereken tüm yerleşik verileri işler. İkinci özel durum, daha önce oluşturulmuş statik verilerdir. Bu senaryoda, getStaticProps getirilecek verileri yükler, bunları sayfayla birleştirir ve yeni bir sayfayı statik bir dosya olarak oluşturur.

getStaticPaths fonksiyonu, "fallback: false" veya "fallback: true" ayarıyla çağrılabilir. "fallback: false" ayarı, belirli bir sayfa yolunun oluşmadığı bir durumda 404 hatası verir. "fallback: true" ayarı ise belirli bir sayfa yolu olmayan herhangi bir talep için varyasyona izin verir.

Örnek bir kullanım:

Parametre	Açıklama
params	Yolun adı.

export async function getStaticPaths() {  return {    paths: [      { params: { id: '1' } },      { params: { id: '2' } }    ],    fallback: false  }}

Bu örnek, "pages / [id] .js" dosyasında bulunan olası iki yol için bir statik yol listesi döndürür.

getStaticPaths fonksiyonu, dinamik veriler için Next.js'in en etkili çözümlerinden biridir ve Next.js'in dinamik yükleme özelliğini basitleştiren bir yöntemdir.

Örnek Uygulama

Next.js'in dinamik yükleme özellikleri, özellikle e-ticaret gibi web sitelerinde çok kullanışlı olabiliyor. Bu özellik sayesinde sayfalar arasında daha hızlı geçiş yapılabiliyor ve kullanıcılara daha iyi bir deneyim sunuluyor. Aşağıda, dinamik olarak yüklenen verilerin nasıl Next.js ile kullanılabileceğini gösteren basit bir örnek uygulama yer alıyor:

Ürün Kodu	Ürün Adı	Ürün Fiyatı
001	Next.js T-shirt	49.99 TL
002	Next.js Sweatshirt	99.99 TL
003	Next.js Hoodie	149.99 TL

Bu örnekte, ürünlerin listesi bir JSON dosyasında saklanıyor ve bu dosya Next.js'in getStaticProps fonksiyonu ile çağrılıyor. Bu sayede, sayfa yeniden yüklenmeden önce veriler önceden yüklenerek kullanıcıya hızlı bir şekilde gösterilebiliyor. Ayrıca, ürünlerin fiyatlarına tıklandığında, bu fiyatlar da ayrı bir sayfada gösteriliyor. Bu sayfada da, ürünlerin detaylı bilgileri yine JSON dosyasından getirilerek, dinamik olarak yükleniyor.

Next.js'in dinamik yükleme özellikleri sayesinde, hem kullanıcı deneyimi hem de performans artırılıyor. Dinamik olarak yüklenen veriler, tıpkı bu örnekte olduğu gibi kolayca kullanılabiliyor ve Next.js'in getStaticProps, getServerSideProps ve getStaticPaths fonksiyonları, bu işlemin daha da kolaylaşmasını sağlıyor.

Sonuç

Sonuç olarak, Next.js'in sağladığı basit ve etkili server-side rendering özelliği sayesinde web uygulamaları daha hızlı ve daha iyi performans gösterebilir. Dinamik olarak yüklenen veriler için de getStaticProps, getServerSideProps ve getStaticPaths fonksiyonları gibi özellikler sunarak verimli çalışma imkanı sağlar. Bu özellikler sayesinde web uygulamaları hem SEO açısından hem de performans açısından oldukça avantajlı hale gelir.

Next.js ayrıca, client-side rendering ile karşılaştırıldığında daha iyi bir performans gösterirken, ilk yükleme süresi açısından da client-side rendering avantajlı olabilir. Genel olarak, hangi yöntemin kullanılacağı, web uygulamasının ihtiyaçlarına ve hedeflerine bağlı olarak değişir.

Next.js'in server-side rendering ve dinamik yükleme özellikleri, web uygulamaları için önemli bir araçtır ve uygulanması durumunda yüksek performans ve verimlilik sağlayabilir. Bu nedenle, web uygulamaları geliştirme sürecinde bu özellikleri kullanmak oldukça faydalı olabilir.