Next.js Server Side Statik Veri getStaticProps
Arama mototlrarında görünümü artırmak için reactı’ın eksikliği next.js de giderilmiş. sayfa ilk render edilmeden önce getStaticProps aracılığıyla props lar gönderilir ve html sayfanın ilk etapta mevcut verilerle oluşması sağlanır. Daha sonra normal reactive sayfa çalışmaya devam eder. bu sayede arama motorları siteyi crawl ederken boş bir html yerine dolu verileri görür
herşeyden önce getStaticProps çalışır ve oluşan prop HomePage içine gönderilir.
ayrıca getStaticProp içindeki kısım serverside çalışır, kesinlikle cliente gönderilmez. client tarafından erişilmesi istenmeyen kısımlar burada yazılabilir.
oluşacak static sayfanın zamanla otomatik yeniden oluştutulması istenirse getStaticProps a revalidate değeri verilmeli. verilen değer saniye olarak server tarafından algılanır ve her seferinde yeni static sayfayı oluşturur. sitenin özelliklerine göre saniye değeri belirlenmelidir. (not: npm run dev ile çalıştırıldığında yani development server da iken revalidate değeri önemsizdir. getStaticProps sayfayı her yenilediğinizde tekrar çalışır.)
dinamik sayfalarda (örneğin [id].js) getStaticProp kullanılmışsa sayfanın önceden render edilip serverda statik olarak saklanması için dinamik url lerin belirtilmesi gerekir. dinamik url ler verilemezse sayfa pre render olmadığı için çalışmaz. örneği yukarıda ve aşağıda var:
fallback rumuzu birçok sayfanın pregenereted olacağı zaman işimize yarar. mesela amazon’da listelenen milyonlarca ürün sayfası var. nadiren ziyaret edilen sayfalar var. bu durumda fallback: true yapılır ve sık ziyaret edilen sayfaların path ları eklenir. path a eklenmemiş sayfalarda pre genereted olmaksızın çalışır. fallback: false durumunda sadece path eklenmiş sayflar çalışır.
fallback:true durumunda pregenereted olmayan sayfalar function prop ları çağrılır çağrılmaz getiremeyeceği için prop yüklenmediyse Loading return edilmeli. prop geldiğinde function yeniden render edilir. ör:
yada fallback: ‘blocking’ olursa if(!loadedProducts) kısmını yazmadan aynı işlemi yaparız. bu sefer sayfanın yüklenmesi süresince Loading yazısı görünmez.
