Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı Next.js framework'ünde getServerSideProps metodunu anlatmaktadır.
- Video, server-side rendering kavramını açıklayarak başlıyor ve normal client-side rendering ile server-side rendering arasındaki farkları görsel şemalarla gösteriyor. Ardından, getServerSideProps metodunun nasıl kullanılacağını adım adım kod örnekleriyle gösteriyor. Konuşmacı, Rest Countries API'si üzerinden veri alma, komponent proplarına veri gönderme ve bu yöntemin SEO açısından avantajlarını açıklıyor. Video, getServerSideProps metodunun sadece pages klasöründeki sayfalarda kullanılabileceği ve modüllerin kullanıcı tarafına eklenmediği gibi önemli bilgilerle sonlanıyor.
- Next.js'te GetServerSideProps Metodu
- Next.js'te GetServerSideProps metodu, sayfada kullanılan verilerin istek yapıldığı anda alınmak istendiğinde kullanılır.
- Bu metot sayesinde veriler sunucuda alınıp sayfa render işlemi sunucuda yapılabilir, bu işlem serverside rendering olarak adlandırılır.
- Normalde veri alırken, üçüncü parti kaynaklara yapılan istekler uygulama kullanıcının tarayıcısına yüklendikten sonra yapılır ve ilk render edildiğinde veri henüz yüklenmemiştir.
- 00:48Serverside Rendering ve Client-Side Rendering Farkı
- Client-side rendering'de kullanıcı uygulamayı açtığında önce React uygulaması yüklenir, sonra üçüncü parti kaynaklara istek yapılır ve veri ekrana yazdırılır.
- Serverside rendering'de kullanıcı uygulamayı açtığında uygulama henüz yüklenme aşamasındayken üçüncü partilere istek yapılır ve gelen verilerle komponent render edilir.
- Serverside rendering ile kullanıcıya render edilmiş sayfa gönderilir, bu da daha hızlı bir deneyim sunar.
- 03:28GetServerSideProps Kullanımı
- GetServerSideProps içinde veri alma işlemi, komponentin export edilen fonksiyonunun dışında bir fonksiyon olarak tanımlanır.
- Bu fonksiyon içerisinde üçüncü parti kaynaklara istek yapılır ve alınan veri komponent proplarına gönderilir.
- Fetch ile yapılan istekten sonra döndürülen objenin içindeki değerler komponent props objesine gönderilir ve ekrana yazdırılabilir.
- 06:14Serverside Rendering ve Client-Side Rendering Karşılaştırması
- Serverside rendering ile render edilen sayfaların kaynak kodunda tüm veriler yer alır çünkü sunucu tarafında belge yazdırılıp gönderilir.
- Client-side rendering ile render edilen sayfalarda ilk yüklenen doküman içerisinde veriler yoktur, bu nedenle bekleme süresi yaşanır ve kaynak kodunda veriler görünmez.
- Serverside rendering ile veriler önceden render edilip kullanıcıya gönderilir, bu da daha hızlı bir deneyim sunar.
- 09:11GetServerSideProps Kullanımında Dikkat Edilmesi Gerekenler
- GetServerSideProps metodu sadece pages klasörü altındaki sayfalarda kullanılabilir, komponent klasörü içerisindeki sayfalarda işe yaramaz.
- Bu metot SEO açısından önemlidir çünkü render edilen sayfalar arama motorlarının botları tarafından kolayca indekslenebilir.
- GetServerSideProps içerisinde kullanılan modüller kullanıcı tarafına gönderilen JavaScript bandına eklenmez, bu nedenle bundle boyutu büyüyecek diye endişe etmeye gerek yoktur.