React ile internet siteleri hazırlarken kullanıcı arayüzü yani UI hazırlama noktasında bize sunduğu birçok avantaj bulunmakta zaten gün geçtikçe arttan popüleriteside reactın bize birçok şey kattığını kanıtlamakta. Tabi ki her şey kusursuz değil react tarafında da hala bazı eksik ya da config etmesi zor olan durumlar mevcut. Örneğin state yönetimi noktasında componentler arasında ki iletişim kopukluğu sebebi ile Redux veya MobX gibi kütüphaneler ortaya çıktı, yine bazı projelerde React’ın dezavantajı olarak görebileceğimiz Server Side Rendering özelliğini daha rahat kontol etmemiz için Next.js frameworkü ortaya çıktı.Bizde bu yazımda beraber zeo config mantığı ile kolayca SSR proje geliştirmemizi sağlayan react frameworkü Next.js’i inceleyeceğiz.
Yazıya başlamadan önce sıkça kullanacağım iki teknik kelimeyi sizlere açıklayayım;
Server Side Rendering (SSR)
En temel açıklaması ile SSR; HTML dosyalarının sunucu tarafında oluşturulması anlamına gelmekte. Bir internet sitesini ziyaret ettiğimizde o siteye ait sunucuya taleplerimizi iletirsiniz ve arka tarafta bize bir HTML dosyası oluşturur ve tarayıcı bu dosyayı yorumlayarak bize beklediğiniz çıktıyı verir. Yani HTML dosyaların server tarafında oluşturulmasına SSR demekteyiz.
Client Side Rendering (CSR)
SSR tarafında biz sunucudan direkt olarak HTML dosyasını talep ediyorduk fakat Client Side Rendering tarafında sunucudan JavaScript dosyasını istiyoruz, aldığımız bu dosya bizim taleplerimiz doğrultusunda HTML dosyasını anlık olarak oluşturuyor. Aslında her iki yöntemin sonucuda HTML olsada izledikleri yöntemler farklı.
Peki, bizim uygulamamızın CSR veya SSR olmasının avantajı ya da dezavantajı nedir?
CSR ve SSR arasındaki en büyük fark SEO noktasında yaşanmakta. Client Side Rendering projelerin Google gibi arama motorları tarafından indexlenmesinde hala problemler yaşanmakta, yani sağlıklı bir indexleme sürecinden bahsetmek mümkün değil. Bu yüzden React ile hazırladığınız projeyi config (yapılandırma) ihtiyacı ortaya çıkmakta. Bu sürecin react tarafında çok sancılı olması ise bizi SSR için farklı çözümlere itmekte. Bu noktada ise yardımımıza yazımızında konusu olan Next.js frameworkü yetişiyor.
Single Page Applicationların arama motorları tarafından indexlenme durumları tabloda gösterilmiştir .Not : React hala google tarafından sağlıklı olarak indexlenmemektedir.
Next.js Nedir ?
Next.js react üzerine inşa edilmiş zero config mantığı ile geliştirilmiş bir framework. Zero config yaklaşımında developerın bir an önce projeyi ayağa kaldırabilmesi amaçlanmakta. Next.js’in ise bize bu noktada getirdiği en büyük artı hali hazırda SSR desteğinin bulunması fakat sundukları bununlada kısıtlı değil. SSR dışında hazır bir route yapısı ve code splitting (*) gibi react tarafında detaylı yapılandırmalar isteyen işlemler standart olarak geliyor. Şimdi biraz daha detaya inelim ve Next.js mantığını anlamaya çalışalım.
Route Yapısı
Next.js üzerinde oluşturduğumuz dosyaları pages klasörü altında topladığımızda otomatik olarak domain.com/dosyaAdi şeklinde erişebilmemizi sağlamakta. Örneğin bir hakkımızda sayfası yapacağız bunun için pages klasörü altında hakkimizda.js adında bir dosya oluşturmamız yeterli. Artık domain.com/hakkimizda adresine gittiğimizde adresimizi görüyoruz.
Ayrıca dinamik route yapısıda yine çok kolay, örneğin firmaların listelendiği bir internet sitesi hazırlıyorsunuz bunun için pages -> company -> [companyName].js şeklinde klasörleme yapmanız yeterli daha sonrasında domain.com/company/limoncretif ismi ile dinamik dosyanızı generate edebilirsiniz.
CSS Çözümleri
Next.js ile sass, stylus, less gibi css ön işlemcilerinden herhangi birini kullanabilirsiniz. Ayrıca bunların yanında module css veya Next.js ile gelen css yaklaşımı olan styled.jsx kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style jsx>{` p { color: blue; } div { background: red; } @media (max-width: 600px) { div { background: blue; } } `}</style> |
Styled.jsx ile ilgili örneği yukarıda görebilirsiniz. Aslında örneğe baktığınızda normal bir CSS syntaxi ile arasında hiçbir fark olmadığını görebilirsiniz fakat <style jsx> etiketleri arasında yer alması ve ‘ ‘ arasında kodlarımızı yazıyor olmamız farklı. Bu şekilde CSS yazdığımızda Next.js bizim için unique class nameler oluşturuyor böyle projemiz büyüdüğünde class isimlerinin birbirini etkilemesi sorununundan kurtuluyoruz.
Next.js başladığımda ben ilk etapta Sass ile yazmaya çalıştım fakat sass ile yazılan classlar için unique bir atama yapılamıyor bu yüzden proje büyüdükçe kontrol etmek daha zor bir konuma geliyor. Bu nedenle hem unique class nameler oluşturması hemde kod okumasını daha da kolaylaştırdığı için module.css yaklaşımı ile geliştirme yapıyorum.
Ayrıca module.css yazarken post css projenize ekleyerek Sass ile yapabildiğiniz her şeyi hatta daha fazlasını yapabilirsiniz.
Vercel ile Deployment Süreci
Vercel front-end projelerinizi yayınlayabileceğiniz bir platform aynı zamanda Next.js frameworkün geliştirici firması. Bu noktada projenizi canlıya almak için Vercel’i tercih ettiğinizde direkt Github üzerinden reponuzu çekebilir veya kendiniz bir proje oluşturabilirsiniz.
Bu noktada Next.js projelerini Vercel ile devreye almak çok kolay. 🙂 Aynı zamanda AWS veya diğer cloud servislerde de config yaptıktan sonra bu süreci kolayca yönetebilirsiniz ayrıca bunun için internette birçok dokümantasyon bulunmakta.
Code Splitting : Projede yüklenen sayfanın sadece ihtiyacı olduğu CSS dosyalarını çağırmasına code splitting yani kod bölme diyoruz. Bundle paketini code splitting ile bölmenin tahmin edeceğiniz üzere performans noktasında katkısı çok büyük.