NextJS Notlarım

NextJS React için geliştirilmiş bir frameworktür. Sıfırdan React ile eksiksiz bir web uygulaması oluşturmak için göz önünde bulundurmamız gereken birçok önemli ayrıntı vardır. Kod, webpack gibi bir paketleyici(bundler) kullanılarak paketlenmeli ve Babel gibi bir derleyici(compiler) kullanılarak dönüştürülmelidir. Kod bölme(Code Splitting) gibi production optimizasyonları yapmamız gerekiyor. Performans ve SEO için bazı sayfaları statik olarak önceden oluşturmak isteyebiliriz. Sunucu tarafında veya istemci tarafında oluşturmayı da kullanmak isteyebiliriz. React uygulamamızı veritabanına bağlamak için sunucu tarafı kodu yazmamız gerekmektedir.

Avantajlar

NextJS bize ne gibi avantajlar sağlar?

Fast Refresh, Buit in CSS, SASS, CSS in JS desteği
Sezgisel bir sayfa tabanlı yönlendirme sistemi (dinamik rotaları destekleyen) (Page-based routing system, support for dynamic routes)
Daha hızlı sayfa yüklemeleri için otomatik kod bölümleme(Code Splitting)
Optimize edilmiş önceden getirme ile (prefetcing) istemci tarafı yönlendirme (client side routing)
Sunucusuz İişlevlerle API uç noktaları oluşturmak için API yolları
Pre-rendering, Static Generation(SSG), Server Side Rendering(SSR)

Client Side Rendering

Eğer bir JS framework'ü kullanılıyorsa server side rendering aktif hale getirilmediği müddetçe client side rendering kullanılır. Bir Url'e istek yapıldığı zaman, server içi neredeyse boş olan HTML sayfası döndürür. Bu aşamada kullanıcı loading ekranını görmektedir.
Tarayıcı,sayfayı interaktif bir hale getirmek için bundle edilmiş js kodunu indirir. Kullanıcı bu sırada loading ekranını görür.
Tarayıcı react kodunu execute eder, kullanıcı loading ekranını görmeye devam etmektedir.
HTML sayfasına React Virtual Dom yüklenir ve JS koduda compile edildikten sonra sayfa interactable bir hale gelir. create-react-app ile oluşturulan projeler, client side rendering metodunu kullanmaktadır.

Client Side Rendering Özelliği

Initial Payload uzun sürmektedir.

Server Side Rendering

Bir Url'e istek yaptığımızda server bize render edilmeye hazır bir html sayfası döner. Kullanıcının tamamen görüntüleyebileceği ama interaktif olmayan bir ekran oluşturulur. Kullanıcı statik olarak bir sayfayı görüntüleyebiliyor. Tarayıcı js kodunu indirerek, daha sonrasında react'ı execute ederek sayfayı etkileşim sağlanabilir hale getiriyor.

SSR'da tüm yük server üzerindedir. Initial Payload CSR'e göre SSR daha hızlıdır. SSR'daki sorun tekrar sayfa url tıklanınca yaptığı işlemleri yeniden yapıyor ve diğer sayfa yüklenmelerininde yavaşlamasına sebep oluyor. SSR, CSR'e göre daha iyi bir SEO deneyimi sağlar. NextJS Framework kullanılarak uygulama içerisinde SSR aktif hale getirilir.

Install

Global olarak yüklemek için:

npm i -g create-next-app
Global olmadan yüklemek için:

npx create-next-app project-name --use-npm

Özellikler

Pages klasörü next.js'in routing sistemi ile alakalıdır. Pages klasörü içinde oluşturulan sayfaların urlleri otomatik olarak oluşturuluyor.
Pre-rendering(Using Next.js): Önceden render edilmiş HTML sayfası JS kodları yüklenince gözükür.
Hydration: Sayfanın tamamen etkileşim kuralabilir hale gelmesidir.
No Pre-rendering (Plain React.js app): Uygulama render edilmemiştir. JS kodu yüklenmesi ile render edilir.
Two Forms of Pre-rendering
- Static Generation
  
  HTML,Build time'da oluşturulur. Oluşturulan HTML, her request işleminde tekrar tekrar kullanılıyor, yeniden oluşturulmuyor. SSR'e göre daha hızlı.
- Server-side Rendering
  
  HTML, her request'de oluşturuluyor.
Built in support: .css, .sass, .scss, CSS inJS(styled-jsx)

Hybrid Next.js

Her sayfa için farklı bir prerendering kullanmamıza izin veriyor.

Ne zaman hangisi kullanılmalı?

NextJS önerisi mümkün olan her yerde Static generation kullanılması yönünde.

Örneğin:
- Blog postları
Sıkca güncellenen bir veriye sahip isek, Server-side rendering tercih edilmelidir.