Next.js Firebase Fetch Data, useEffect, SWR, getStaticProps

firebase realtime database oluşturulur. aşağıda useEffect içersinde bağlanıp veri çekilir.

bu örnekte veri client side çekilir. yani search engine crawl esnasında sayfa pre rendered olmadığı için ilk yüklenen değer “No data yet” paragrafı search engine tarafından alınmış olur.

yukarıdakinin daha basiti var. swr

npm install swr

(fetcher in daha basit hali varmı sonra bak?)

yukarıdaki yöntemler sayfa oluştuktan sonra güncellediği için arama motorlarında sayfanın görünebilir olması için getStaticProps ile sayfanın build edildiği andaki statik versiyonu alınabilir. SWR react metodu olduğu için getStaticProps içinde kullanılamaz. Burada normal fetch ile veri alınır. bu sayede arama motorları sayfa içeriğinin build anındaki veriyi görür ve kullanıcılar sayfa açtığında son halini günceller.

yukarıdaki örneği biraz geliştirelim. firebase de daha detaylı bir tablo oluşturduk.

şimdi events datalarını çekeceğiz.

buradaki herbir jsnon objesini atamanın kolay yolu:

Ayrıca son durumda; sayfa build esnasında oluşturulur ve bir daha build edilene kadar bu hali ile yayınlanır. Bu tarz bir blog sitesinde yapılması gereken static sayfanın belirli aralıklarla yeniden oluşturulmasıdır. Bunun için revalidate ile sayafanın kaç saniyede bir yeniden statik versiyonunun oluşturulacağı belirtilmelidir. (alternatif olarak serverside rendering düşünülebilir. ama bu tarz blog sitesinde gerek yok. yada useEffect ile sayfa load edildikten sonra veriler güncellenebilir. oda gereksiz)