NextJS'te Navigasyona Giriş

Bu ders kitabı bölümünde, NextJS'te bağlantıların çalışması hakkında konuşacağız.

Başlangıç olarak, bağlantılarda özel olan ne var onu tartışalım. Onlara web sitesi oluşturmanın çeşitli yaklaşımlarında bakalım.

React'te Web Sitesi

React'te bir web siteniz olduğunu varsayalım. Bilindiği gibi React, SPA - kullanıcının her zaman tek bir sayfada kaldığı bir web sitesini temsil eder. React Router'ı ekleyebilirsiniz ve kullanıcı farklı sayfalara gidiyormuş gibi hisseder, fiziksel olarak tek bir dosyada kalsa bile.

Bu durumda kullanıcı bağlantılara tıklayacak, başka bir sayfaya gidiyormuş gibi görünecek, ancak tarayıcıdaki web sitesi sayfası yeniden yüklenmeyecek - React, kullanıcının ekranda gördüğü şeyi dinamik olarak oluşturacak.

Bu şemada, kullanıcı site şablonunu sayfaya ilk girdiğinde alır, ardından sitenin parçaları sadece JavaScript aracılığıyla değişir. Bu arada, site AJAX üzerinden sunucudan veri isteyebilir.

Bu yaklaşım, hosting üzerindeki yükü azaltır (kaynakları bizim paramıza mal olur), ayrıca kullanıcının internet kanalındaki yükü de azaltır.

Ancak bu yaklaşımın bir eksiği var - SEO sorunu. Sitenin bir dizi bağlantısı var gibi görünüyor ve adres çubuğunda bir şeyler değişiyor ve hatta belirli bir site sayfasına bağlantıyı mesajlaşma uygulaması üzerinden bile paylaşabilirsiniz. Ancak, sayfa içeriği istemcide dinamik olarak oluşturulur ve arama motorları bunu işleyemez. Bu nedenle böyle bir site tanıtılmayacaktır.

Ancak, tüm web siteleri arama motorlarında tanıtılmak için tasarlanmamıştır. Ve eğer sizinki tasarlanmamışsa, o zaman bu şema sizin için oldukça çalışabilir.

Backend'de Web Sitesi

Web sitenizin backend dillerinden biriyle yapıldığını varsayalım. Örneğin, PHP'de.

Bu durumda, kullanıcı bağlantılara tıkladığında, web sitesi sayfası her seferinde tamamen yüklenecektir.

Sorun şu ki, sayfanın önemli bir kısmı zaten kullanıcıda var. Çünkü, bildiğiniz gibi, sayfada genellikle sadece içerik ve meta veriler değişir, geri kalan her şey değişmeden kalır.

Peki neden sadece içerik değiştiğinde geri kalanını indirelim? Bu, sunucu ve internet kanalı üzerinde artan bir yük oluşturur.

Başka bir sorun daha var. Aldığımız sayfada, içerikte, bir çevrimiçi mağazada olduğu gibi, ürünlerin bir listesi yer alsın. Açıkçası, her ürün aynı şablonlamaya sahiptir. Daha optimal olanı, sadece ürün verilerini ve ürün çıktı şablonunu indirmek olurdu. Ve ardından istemcide her bir ürünü bu şablonda görüntülemek. Ama biz ürünleri, tekrarlayan ürün şablonuyla birlikte indiriyoruz.

Özetle, eğer saf backend'de bir sitemiz varsa, ağ üzerinden gereksiz veri taşırız.

Ancak, bu durumda SEO sorunumuz olmaz. İstenen URL'ye her zaman arama motorları tarafından anlaşılabilen statik içerik sunulur.

NextJS'te Web Sitesi

NextJS her iki yaklaşımı birleştirir. Kullanıcı URL'yi doğrudan adres çubuğuna yazdığında, yanıt olarak sayfanın statik içeriğini alır.

Ancak kullanıcı sitemizdeki bağlantılara tıklamaya başladığında, web sitesi sayfası tamamen yenilenmez, bunun yerine AJAX aracılığıyla kullanıcının ihtiyaç duyduğu veriler yüklenir.

Bir arama motoru sitemizde dolaştığında, ihtiyaç duyduğu statik içeriği görür. Ve bir kullanıcı sitemizde dolaştığında, sitemiz SPA gibi davranmaya başlar.

Ve en önemlisi, NextJS tüm bunları otomatik olarak yapar! Bizim bununla ilgilenmemize gerek yok - o her şeyi kendi yapar. Harika!

Sonraki derslerde, NextJS'in anlatılan şekilde çalışmasını nasıl sağlayacağımızı inceleyeceğiz.