Anahtarın sunucuda tutulduğu bir Next.js web arka bağlantı denetleyicisi

Render: bir tarayıcı botu ve bir müşterinin gördüğü şey

Bu panel bir girişin arkasındaysa, sunucu veya istemci render'ı bir UX tercihidir. Ücretsiz bir arama sayfası gibi indekslenmesini istediğiniz herhangi bir şey herkese açıksa, ilk tabloyu sunucuda render edin.

Boş bir kabuk olarak gelen ve hidrasyondan sonra doldurulan bir sayfa, indeksleme ve yavaş telefonlar için bir risktir. Google JavaScript'i yürütebilir, ancak bu adımı kuyruğa alır ve her zaman hızlı bir şekilde yapamaz.

Ücretsiz genel bakışı sunucuda tutun

Ucuz, ücretsiz overview çağrısını bir Sunucu Bileşenine yerleştirin ve ziyaretçinin ücretli, daha derin çekimleri bir düğmeden tetiklemesine izin verin. Bu bölünme, kredi harcamanızı öngörülebilir tutar.

Ücretsiz çağrılar hiçbir şeye mal olmaz, bu nedenle sunucuda render edilen bir genel bakış kredi harcaması eklemez. Yalnızca ücretli çekimler için bir düğme ve oturum gerekir.

Boş durum hakkında düşünün. Boş bir tabloya gelen bir ziyaretçi, aracın bozuk olduğunu varsayacaktır ve hızlı bir ikinci boyama bu ilk izlenimi geri almaz.

İlk ekran için ücretsiz işlemleri seçin ve detaylar için ücretli olanları seçin. Bir sayfa açan ve ücretsiz bir özet gören bir ziyaretçinin, yanlışlıkla bir ücretli düğmeye basması için bir nedeni yoktur.

Sadece sayıya değil, açıklamaya bağlantı verin

Sayıları bağlamak kolay kısımdır. Onları açıklamak daha zordur, bu nedenle ipucu kutusundan DR formülü bağlantısını verin ve indeksin ayda bir yenilendiğini belirtin.

Formülünü görmeden bir puan gören bir ziyaretçi, tahmin yürütecektir, bu nedenle bağlantı ekrandaki sayının yanında olmalıdır.

Bir panelin sunucu ve istemci kısımları

Çoğu panel her iki tür kodu da gerektirir. Sahiplik bölünmeyi belirler. Anahtar, veri ve erişim kurallarının her birinin bir yuvası vardır. Herkese açık bir web arka bağlantı denetleyicisi sayfası, girişin arkasındakiyle aynı bölünmeye ihtiyaç duyar.

Sunucuda veri çekin, istemcide sıralayın

Bir arka bağlantı tablosu, insanların içinde sıralama, filtreleme ve sayfalama yaptığı bir istemci bileşeni için uygundur. Satırlar, zaten rotanıza çağrı yapmış olan bir sunucu bileşeninden gelmelidir, böylece tarayıcı anahtarı veya üst akış URL'sini tutmaz.

On satırı istemcide sıralamak anlık olur. Her seferinde taze bir istekte beş bin satırı sıralamak yavaştır, bu yüzden tam küme zaten yüklediğiniz bileşende tutun.

Basit tutun. Anında sıralayan bir tablo, her tıklamada yeniden veri çeken bir tablodan daha iyidir.

İstemci sınırını düşük tutun

Sınırı ağaçta mümkün olduğunca aşağı itin. Dinamik olarak içe aktarılan, yalnızca istemciye özel bir widget tarayıcıda render edilir, satırları veri çeken bileşen ise sunucuda kalır. Satırları prop olarak iletin ve veriyi sınırların üzerinde tutun.

Veri çekme işlemini sınırların altına taşırsanız, tarayıcı çağrıyı kendisi yapar. Bu, anahtar sızıntısı bölümünde uyarılan hatadır, bu nedenle bu sınırla ilgili her değişiklikten sonra Ağ sekmesini kontrol edin.

Çizgi tam olarak nerede düşer? Önce kağıt üzerinde çizin, bir veri çekme kutusu ve her etkileşimli kontrol için bir kutu ile ve çizgiyi geçen okları sayın.

Kabuk ve oturum kontrolleri sunucuda kalır

Düzen ve oturum kontrolleri, bir ziyaretçinin ne görebileceğine karar verir, bu nedenle sunucuda olmalılar. Etkileşimli tablolar, formlar ve grafikler, bu kararı değiştirmeden sonra hidrate edebilir.

İstemci tarafı bir koruma bir düğmeyi gizleyebilir, ancak bir isteği durduramaz. Erişimin gerçekten uygulandığı yer route handler ve sunucu düzenidir.

Ardından, çerez olmadan aynı isteği gönderin ve sunucunun sayfadan değil, isteği reddettiğini onaylayın.

Aynı kural proxy'nin kendisini de kapsar. Yalnızca tarayıcıda gerçekleşen bir oturum kontrolü rotayı koruyamaz, bu nedenle route, bir kredi harcamadan önce oturumu da kontrol eder.

Ziyaretçi başına değil, alan adı başına önbellekleme

Route, üst akış URL'sini alan adından oluşturur, bu nedenle önbellek anahtarı da alan adını takip eder. Bir siteyi arayan bir ziyaretçi, aynı site hakkında soru soran bir sonraki ziyaretçi için sayfayı ısınmış hale getirir.

İşleyicideki günlük revalidate'nin amacı budur. Aynı alan adındaki iki ziyaretçi bir üst akış çağrısına mal olur ve bin alan adındaki bin ziyaretçi bin çağrıya mal olur, bu nedenle önbellek bütçedir.

Ters durumu da izleyin. Sorgu dizesini bir zaman damgası tarafından değiştiren bir sayfa, önbelleği tamamen bozar ve fatura loglardan önce bunu gösterir.

İndeksle eşleşen bir zamanlamada yeniden doğrulayın. Günlük bir pencere aylık veriler için uygundur ve daha kısa bir pencere yalnızca çağrı ekler, yeni gerçekler eklemez.

Sertleştirme, yapacağımız sırayla

Handler kolay kısımdır. Sertleştirme, bir anahtarın sızdığı veya bakiyenin boşaltıldığı yerdir, bu nedenle bu sırayı çalışın.

Kendi Ağ sekmenizi tarayın

Kendi panelinizde Chrome DevTools'u açın ve Ağ sekmesini okuyun. Yakından bakın. Eğer oradaki bir istek herhangi bir yerde sk_live_ gösteriyorsa, anahtarı bugün döndürün. Bu kontrol bir dakika sürer ve en yaygın sızıntıyı bulur.

İstek üstbilgilerinin yanı sıra yanıt gövdelerini de arayın. Bir hata mesajında yankılanan bir anahtar da bir sızıntıdır.

Kullanıcı başına çağrıları sınırlayın

Sonraki adım, kullanıcı başına bir sınır eklemektir. Bunu rotanın önüne koyun. Yukarıdaki handler, ona ulaşabilen herkes için kredinizi harcar, bu nedenle bunu bir oturuma bağlayın ve saat başına çağrıları sınırlayın. Kredi sayfasındaki bütçe matematiğinden limit seçin.

Cömert başlayın ve sonra sıkılaştırın. Birinci gün gerçek kullanıcıları engelleyen bir limit, onlara başka bir araç bulmalarını öğretir.

Kimin tamamladığını adlandırın

Çalışma kitabında bir satır eklemek de değerlidir: bakiye belirli bir seviyenin altına düştüğünde kimin aranacağı ve kimin tamamlaması gerektiği. Kişiyi adlandırın.

Tamamlama adımını hesap sayfası bağlantısı ve beklenen dönüş süresi ile bir kontrol listesi olarak yazın. Yalnızca bir kişinin zihninde var olan bir çalışma kitabı, o kişi izindayken ilk seferde başarısız olur. Adımın kendisi dakikalar sürer, bu nedenle yazı daha büyük bir iştir.

Bakiye bitmeden önce günlüğe kaydedin

Ardından, her üst akış yanıtından _credits değerini kendi metriklerinize günlüğe kaydedin. Günlük olarak örnekleme yapılmış kalan bakiye grafiği, HTTP 402'den bir hafta önce sizi uyarır.

Uyarı seviyesini kendi haftalık kullanımınızdan seçin. Bir şablondan seçilen bir sayı nadiren gerçek çağrılarınızla eşleşir.

Gördüğünüz son değeri hem logda hem de bellekte tutun, böylece route, sayı uyarı seviyesinin altına düştüğünde ücretli çekimleri reddedebilir. Bu kontrol bir satırdır ve trafiğin bir patlamasının gerisini harcamasını durdurur.

Beyaz listeyi tek bir yerde tutun

Bir alışkanlık daha sonuç verir. Beyaz listeyi, handler ve testler tarafından içe aktarılan paylaşılan bir sabitte tutun, böylece yeni bir işlem, görünür bir liste düzenlenmiş ve bir gözden geçiren bunu fark etmeden üretim ortamına ulaşamaz.

Bir dosya, bir içe aktarma. Proxy'nin ne kabul edeceğini bilmek için birinin üç bileşende listeyi araması gerekmemelidir.

Dağıttığınız çalışma zamanını test edin

Son olarak, handler'i Node 20 veya tercih ettiğiniz kenar çalışma zamanında çalıştırın ve her ikisini de test edin. Kodun yaptığı gibi üst akış gövdesini akıştırmak her ikisinde de çalışır, ancak üstbilgi işleme farklılık gösterir ve bir testi değerlidir.

Kötü bir eylemle rotayı çağıran ve geçerli bir eylemle çağıran bir test ekleyin ve durum kodları üzerinde iddia edin. Bu iki test, beyaz listedeki ve üstbilgi işlemedeki çoğu geriye dönük uyumsuzluğu yakalar.