React SSR Çözümü, Next.js Nedir? (Örnek Proje)
Öncelikle makalede kullanılacak bazı kavramları açıklamakla başlayalım;
SSR ( Server Side Rendering ): Vue, react, backbone gibi kütüphaneler yaygınlaşmadan önce genellikle bu render metodu tercih edilirdi. SSR’da sunucu tüm gerekli içerikleri doldurarak clienta gönderir.Sonuç olarak veriler , client html dosyasını indirdiğinde tümüyle clientin elinde olmuş olur.
CSR ( Client Side Rendering ): Bu render yönteminde SSR’ın aksine sunucu clienta içini doldurması için boş html dosyasını ve javascript dosyalarını gönderir.Bu noktadan sonra routing ve içerik doldurma işlemleri client tarafından gerçekleştirilir.Gelen boş html sayfası client tarafından doldurularak servis edilir.
Open Graph: İlk olarak 2010 yılında facebook tarafından duyurulan open graph kullanıcı , websitesi ve facebook arasında bilgi iletimini sağlamak amacıyla kullanılmaktadır.Og meta tagleri ile websitesi sayfalarının facebook tarafından anlaşılır ve doğru şekilde paylaşılabilmesini sağlamaktadır.Twitter’da open graph benzeri meta taglerine sahiptir.
Next.js
Her ne kadar google ve modern arama motorları SPA(Single Page Application)’ları crawl etmede sorun yaşamadıklarını belirtselerde bazı durumlarda ne yazık ki doğru şekilde sayfaları crawl edemedikleri görülebilir. Bu noktada react ile yaptığınız uygulamaları SEO tarafında güvenli hale getirebilmek için prerender.io gibi ücretli hizmetlerden faydalanabilir yada Next.js gibi frameworkler sayesinde react ile SSR kullanarak uygulama geliştirebilirsiniz.
Yazının devamında örnek bir next.js projesi üzerinden next.js in bize sağladığı bazı avantajları anlatarak devam edeceğim.
Kurulum:
Next.js kurulumunda izleyebileceğiniz iki yol mevcut ; isterseniz npx yardımıyla yada direk olarak npm ile next,react ve react dom paketlerini ekleyerek kurulumu tamalayabilirsiniz.Bu makalede npx üzerinden kurulum anlatılacaktır.
Projeyi yüklemek için;
npx create-next-app
Projeyi çalıştırmak için ;
npm run dev
Projeyi çalıştırdığımızda localhost:3000 adresinden tek sayfalık bir websitesi servis edilecektir.Proje dosyalarına baktığımızda pages klasörünün altında bir adet index sayfası göreceksiniz.Diğer dosyalara baktığımızda daha önceden react.js yazanlar routeların tanımlı olduğu bir dosya olmadığını farkedecektir.Bu noktada next.js in File-System Routing özelliği devreye girmekte.
Pages klasörüne açtığınız her bir .js dosyası aynı zamanda route olarak hizmet etmekte .Pages klasörünün altına articles.js adlı bir dosya açtığınızda localhost:3000/articles adresine gittiğinizde direk olarak articles.js dosyasında bulunan componentiniz ile karşılaşacaksınız.
Head:
Next.js ile gelen en önemli component olan head componenti ile birlikte sunucu meta taglerinizi open graph tagleri dahil sunucu tarafından render edip servis edebiliyorsunuz.
React tarafında helmet gibi çözümler bunu gerçekleştirebilsede helmet ile hazırlanan html headleri ne yazıkki sosyal platformlar tarafından görülmemekte.Next head ise html headinizi server tarafında render edip clienta servis ettiği için seo tarafında sorunlar yaşanmamakta tek yapmanız gereken meta taglerinizi componentin içine almak her sayfa için ayrı ayrı bu yapıyı kurabilir yada component ağacınızın en yukarısındaki componentinize default olarak taglerinizi ekleyebilirsiniz.
getInitialProps:
Diyelim ki bir api’dan veri çekeceksiniz bu noktada react tarafında kullanabileceğiniz axios,fetch gibi opsiyonlar mevcut fakat bunların hiç biri reactin doğası gereği yapılan isteği html yaratılmadan önce yapmamaktadır.
Sayfa yüklendikten sonra belirttiğiniz istekler gerçekleştirilir.Buda ilk olarak boş bir html sayfası görmenize neden olur.Next.js tarafında ise arka planda node.js çalıştığından dolayı belirttiğiniz istekleri html servis edilmeden yapma imkanımız var.Bu noktada next.js’in bize sağladığı getInitialProps özelliğini kullanıyoruz.
Öncelikle projemize isomorphic-unfetch kütüphanesini ekliyoruz
npm install — save isomorphic-unfetch
Örnek proje için https://newsapi.org/ tarafından servis edilen basit bir haber api kullanacağız.https://newsapi.org/ adresi üzerinden kolaylıkla kendi api keyinizi oluşturabilirsiniz.
Articles sayfamiza yukarida bulunan statik , asenkron kod bloğunu ekliyoruz.
Bu fonksiyonun yaptığı tek işlem api a gidip dataları alıp prop olarak belirtilen componente dönmek.Prop olarak dönen datayı Articles componentinin içinde listelemek için kullanacağız.
localhost:3000/articles adresinde sayfa kaynağını görüntüle dediğimizde apidan istediğimiz tüm data ve meta tagleri html’e basılmış olarak servis edilecektir.Bu durumda seo tarafında spa lerle birlikte oluşan bir çok sorunu çözmüş oluyoruz.
Deployment Süreci:
npm run build
Bildiğiniz üzere react ile build aldığınızda size build klasörü altında static html dosyaları dönmekte next.js de durum biraz farklı projede build komutu çalıştırdığınızda next.js build aldığı dosyaları .next klasörü altında listelemekte.
React build klasörünün altındaki statik .html dosyalarını açtığınızda proje çalışırken next.js tarafında ssr dolayısıyla böyle bir durum ne yazık mümkün değil.Projeyi servis edebilmeniz için arka planda bir node server çalışması zorunlu.Bu noktada da deployment için pm2 gibi servisler kullanabilirsiniz.
npm run start
Sonuç:
Bu yazımda next.js’in bize sağladığı avantajlardan sadece bir kaçına değinebildim.Bu özelliklerin dışında otomatik amp sayfaları oluşturmak , hızlı api servisleri oluşturmak gibi bir çok özelliği mevcut.
Next.js projesini Npx yardımıyla konfigürasyonla uğraşmadan custom route yazmadan çok hızlı bir şekilde ayağa kaldırmanız mümkün.Google lighthouse ve diğer test toolarına baktığımızda next.js’in ne derece iyi puanlar aldığını görebiliyoruz.
Seo beklentinizin olmadığı intranet uygulamaları gibi response süreleri düşük uygulamarda ise kullanımını pek gerekli görmüyorum.
Makaleyi okuduğunuz için teşekkür ederim.
Kaynakça:
