Automatic Static Optimization

Next.js, engelleyici veri gereksinimi yoksa bir sayfanın statik (önceden oluşturulabilir) olduğunu otomatik olarak belirler. Bu belirleme, sayfada getServerSideProps ve getInitialProps adreslerinin bulunmamasına göre yapılır.

Bu özellik Next.js'nin hem sunucu tarafından oluşturulan hem de statik olarak oluşturulan sayfalar içeren hibrit uygulamalar oluşturmasına olanak tanır.

Statik olarak oluşturulan sayfalar hala reaktiftir: Next.js, tam etkileşim sağlamak için uygulamanızı istemci tarafında hidratlayacaktır.

Bu özelliğin en önemli avantajlarından biri, optimize edilmiş sayfaların sunucu tarafında hesaplama gerektirmemesi ve birden fazla CDN konumundan son kullanıcıya anında aktarılabilmesidir. Sonuç, kullanıcılarınız için ultra hızlı bir yükleme deneyimidir.

How it works

Bir sayfada getServerSideProps veya getInitialProps varsa, Next.js sayfayı istek üzerine, istek başına (yani Sunucu Tarafı Oluşturma) oluşturmaya geçecektir.

Yukarıdaki durum söz konusu değilse Next.js, sayfayı statik HTML'ye önceden oluşturarak sayfanızı statik olarak otomatik olarak optimize edecektir.

Ön oluşturma sırasında, yönlendiricinin query nesnesi boş olacaktır çünkü bu aşamada sağlayacak query bilgimiz yoktur. Hidrasyondan sonra Next.js, query nesnesindeki rota parametrelerini sağlamak için uygulamanızda bir güncelleme tetikleyecektir.

Hidrasyondan sonra sorgunun güncellenerek başka bir render işlemini tetikleyeceği durumlar şunlardır:

• Sayfa dinamik bir rotadır.
• Sayfanın URL'sinde sorgu değerleri vardır.
• Yeniden yazmalar next.config.js adresinizde yapılandırılır, çünkü bunlar query adresinde ayrıştırılması ve sağlanması gerekebilecek parametrelere sahip olabilir.

Sorgunun tamamen güncellenip güncellenmediğini ve kullanıma hazır olup olmadığını ayırt edebilmek için isReady alanından yararlanabilirsiniz. next/router.

Bilmekte fayda var: kullanan bir sayfaya dinamik yollarla eklenen parametreler getStaticProps her zaman query nesnesi içinde kullanılabilir olacaktır.

next build statik olarak optimize edilmiş sayfalar için .html dosyalarını yayacaktır. Örneğin, pages/about.js sayfası için sonuç şöyle olacaktır:

.next/server/pages/about.html

Ve eğer sayfaya getServerSideProps adresini eklerseniz, bu şekilde JavaScript olacaktır:

.next/server/pages/about.js

Caveats

• getInitialProps ile özel bir App adresiniz varsa, bu optimizasyon Statik Oluşturma olmayan sayfalarda kapatılacaktır.
• getInitialProps ile özel bir Document adresiniz varsa, sayfanın sunucu tarafında işlendiğini varsaymadan önce ctx.req 'nin tanımlı olup olmadığını kontrol ettiğinizden emin olun. ctx.req, önceden işlenen sayfalar için undefined olacaktır.
• asPath değerini kullanmaktan kaçının next/router Yönlendiricinin isReady alanı true olana kadar oluşturma ağacında. Statik olarak optimize edilmiş sayfalar yalnızca istemcide asPath adresini bilir, sunucuda bilmez, bu nedenle bunu bir prop olarak kullanmak uyumsuzluk hatalarına yol açabilir. active-class-name örneği, asPath 'yi prop olarak kullanmanın bir yolunu göstermektedir.