Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere Nuxt.js kullanarak Strappy headless CMS'den veri çekme sürecini adım adım göstermektedir.
- Video, yeni bir "films" sayfası oluşturma ile başlayıp, veri çekme yöntemlerini (server-side rendering, static site generation, client-side rendering) açıklamaktadır. Özellikle get static props yöntemi kullanılarak Strappy CMS'den film verilerinin nasıl fethedileceği, environment değişkenlerinin nasıl kullanılacağı ve verilerin nasıl listeleneceği gösterilmektedir. Video, bir sonraki bölümde pagination özelliğinin ekleneceği bilgisiyle sonlanmaktadır.
- 00:01Nuxt.js'te Film Listesi Sayfası Oluşturma
- Strappy CMS'ten veri çekmek için "films.js" adında yeni bir sayfa oluşturuluyor.
- Sayfa için layout ve "filmsList" adında bir bileşen oluşturuluyor.
- Bileşen, layout'u döndürerek ve arasında "films" yazısı ekleyerek temel iskelet oluşturuluyor.
- 01:15Nuxt.js'te Veri Çekme Yöntemleri
- Nuxt.js'te veri çekme için server-side rendering, static site generation, client-side rendering, dinamik yollar ve incremental static regeneration (ISR) gibi farklı yöntemler bulunuyor.
- Server-side rendering için "getServerSideProps" fonksiyonu kullanılıyor ve bu fonksiyondaki kodlar sadece sunucu tarafında çalıştırılıyor.
- Static site generation için "getStaticProps" fonksiyonu kullanılıyor ve bu fonksiyon statik site oluşturma için gerekli verileri build zamanında sağlıyor.
- 03:29Client-Side Veri Çekme ve SWR
- Client-side veri çekme için "useEffect" hook'u veya "SWR" (Stale While Revalidate) kullanılabilir.
- SWR, HTTP cache invalidation stratejisini otomatik olarak uygulayan bir Next.js pattern'i.
- SWR stratejisi, veriyi önce cache'den alır, sonra güncellemek için fetch isteği gönderir ve en son güncel veriyi döndürür.
- 04:39Strappy CMS'ten Veri Çekme
- GetStaticProps fonksiyonunda Strappy headless CMS'ten uygun verileri çekip props olarak döndürmek gerekiyor.
- Root klasörde "env" dosyası oluşturulup, "next_public_strappy_url" değişkeni "http://localhost:1337/api" olarak ayarlanıyor.
- "lib" klasöründe "api.js" dosyası oluşturulup, fetch API'sini saran bir fonksiyon yazılıyor.
- 07:00Verileri Gösterme
- "films.js" dosyasında "getServerSideProps" fonksiyonunda "fetcher" fonksiyonu kullanılarak Strappy'den film verileri çekiliyor.
- Çekilen veriler "props" olarak döndürülüyor ve "filmsList" bileşeninde kullanılıyor.
- Filmler için yeni bir "films.js" bileşeni oluşturulup, "map" fonksiyonu kullanılarak her film için liste öğesi oluşturuluyor ve film başlıkları gösteriliyor.