Edge işlevi küçük, iyi tanımlanmış bir kavram olabilir, ancak bunları çok çeşitli amaçlar için kullanabilirsiniz.

Next.js, sunucu tarafında işlenmiş React uygulamaları geliştirmek için popüler, açık kaynaklı bir çerçevedir. Kullanım kolaylığı ve uyarlanabilirliği sayesinde karmaşık web uygulamaları oluşturmak için kullanabilirsiniz.

Edge işlevleri, Next.js'nin en heyecan verici özelliklerinden biridir. Edge işlevleri ve bunları Next.js'de kullanmanın beş yolu hakkında bilgi edinin.

Kenar İşlevleri Nedir?

Next.js'nin güçlü Edge işlevleri özelliği, özel sunucusuz işlevleri uç ağda son kullanıcıya daha yakın çalıştırmanıza olanak tanır. Bu, kodun istemciye coğrafi olarak daha yakın bulunan sunucularda çalıştığı ve web uygulamalarında daha hızlı ve daha fazla performans sağladığı anlamına gelir.

Edge işlevleri, isteği veya yanıtı değiştirebilir, verileri getirebilir, kimlik doğrulaması yapabilir ve daha fazlasını yapabilir.

Edge fonksiyonları anında çalışır. Veri yüklemek ve sayfaları oluşturmak için gereken süreyi azalttıkları için web performansını ve kullanıcı deneyimini geliştirmek için Edge işlevlerini kullanabilirsiniz.

instagram viewer

Modern ve yeni nesil cihazların ihtiyacı kenar bilgi işlem olduğundan daha güvenilir ve güvenli olduğundan Bulut bilişim ve Edge işlevlerinden yararlanır. Ayrıca, cihaz üzerinde tek başına bilgi işlem yapmaktan daha yetenekli ve esnektir.

Next.js'de Edge işlevlerini kullanmanın bazı yolları şunlardır.

1. Dinamik Yönlendirme

Next.js'de Edge işlevlerini kullanmanın bir yolu, dinamik yönlendirmedir. Sorgu parametreleri veya istek başlıkları gibi dinamik verilere dayalı olarak özel yolları tanımlayabilir ve yönetebilirsiniz.

Bu, çeşitli isteklerle ilgilenen daha uyarlanabilir ve dinamik web uygulamaları yapmak için değerlidir.

Dinamik yönlendirmeyi aşağıdaki şekilde uygulamak için Next.js'nin Edge işlevlerini kullanabilirsiniz:

// sayfalar/api/[slug].js
ihracatvarsayılanişlevişleyici(talep, res) {
sabit { bilgi } = talep.sorgu;
eğer (sümüklüböcek 'hakkında') {
 res.status(200).Göndermek("Bu, hakkında sayfası!");
 } başkaeğer (sümüklüböcek 'temas etmek') {
 res.status(200).Göndermek('Bu, iletişim sayfasıdır!');
 } başka {
 res.status(404).Göndermek('Sayfa bulunamadı.');
 }
}

Bu örnek, adlı bir dosyanın içeriğini gösterir. [slug.js] içinde sayfalar/api dinamik verilerle özel bir rota tanımlamak için dizin. Bilgi sınırı daha sonra istek sorgusundan kaldırılır. istek.sorgudeğerine dayanan taleplerle başa çıkmanıza olanak tanır. sülük.

Örneğin, bir kullanıcı şuraya giderse: http://example.com/api/about, slug parametresi şu şekilde ayarlanacaktır: hakkında. bu işleyici işlev uygun kod bloğunu çalıştıracak ve "Bu, hakkında sayfasıdır!" mesajını görüntüleyecektir.

Müşteri ziyaret ederse http://example.com/api/contact, işleyici "Bu, iletişim sayfasıdır!" mesajını döndürür.

Dinamik yönlendirme için Edge işlevlerini kullanan geliştiriciler, değişen verilere dayalı olarak çeşitli istekleri işleyebilen daha uyarlanabilir ve dinamik web uygulamaları oluşturabilir.

2. Veri Alma

Next.js'de Edge işlevleri için yaygın bir kullanım durumu, veri getirmedir. Verileri uca taşıyarak sunucu üzerindeki yükü azaltabilir ve web uygulamasının performansını artırabilirsiniz.

Next.js'nin Edge işlevleri, bu örnekte gösterildiği gibi veri getirme işlemini gerçekleştirebilir:

// sayfalar/api/kullanıcılar/[id].js
ihracatvarsayılanzaman uyumsuzişlevişleyici(talep, res) {
sabit { kimlik } = talep.sorgu;


// Kullanıcı verilerini üçüncü taraf bir API'den alın
sabit cevap = beklemek gidip getirmek(` https://api.example.com/users/${id}`);
sabit kullanıcı = beklemek yanıt.json();
// Kullanıcı verilerini döndür
 res.status(200).json (kullanıcı);
}

Bu örnek, kullanan bir API uç noktasını tanımlar. İD üçüncü taraf bir API'den kullanıcı verilerini almak için sorgu parametresi. Kullanmak gidip getirmek yöntemiyle, API'ye bir istek gönderebilir ve ardından wait anahtar sözcüğüyle bir yanıt bekleyebilirsiniz.

Kod daha sonra çağırarak JSON bilgilerini çıkarır. yanıt.json() ve bir değişkende saklar. Son olarak, kullanır json yanıt verilerini JSON olarak biçimlendirmek için yanıt yöntemi.

Uç işlevi veri alma, sunucu yükünü azaltıp web uygulama performansını iyileştirerek uçta veri almanıza olanak tanıyan güçlü bir tekniktir.

Aynı şekilde, uçta dışarıdan bir programlama arabiriminden bilgi alarak talep boştalığını azaltabilir ve müşterilere daha hızlı, daha duyarlı sayfalar sağlayabilirsiniz.

3. Kimlik doğrulamada kullanılır

Erişim denetimi kurallarını uçta uygulayarak web uygulamanızın güvenliğini artırabilir ve hassas verilere yetkisiz erişim riskini azaltabilirsiniz.

Örnek olarak, bir istemcinin kimlik doğrulama durumunu kontrol eden ve bunu yanıtta yankılayan bir işlevi düşünün. İşte Next.js'de Edge yeteneklerini içeren bir doğrulama taslağı:

// sayfalar/api/auth.js
ihracatvarsayılan (gerekli, res) => {
sabit { isAuthenticated } = req.cookies;
eğer (Kimliği Doğrulanmış) {
 res.status(200).json({ İleti: 'Kimliğiniz doğrulandı' });
 } başka {
 res.status(401).json({ İleti: 'Kimliğiniz doğrulanmadı' });
 }
}

Bu çizimde, Edge işlevi tanımlama bilgisini bir kimlik doğrulama belirteci için inceler ve bulunursa kullanıcının bilgileriyle bir JSON yanıtı oluşturur.

4. A/B Testi

Next.js'nin Edge işlevlerini kullanmanın başka bir yolu da, A/B testi kullanarak bir web uygulamasının performansını optimize etmektir. Hangisinin daha iyi performans gösterdiğini belirlemek için A/B testi kullanarak bir web sitesinin veya uygulamanın çeşitli sürümlerini karşılaştırabilirsiniz.

A/B testi gerçekleştirmek için Next.js'nin Edge işlevlerinin nasıl kullanılabileceğinin bir örneği aşağıdaki gibidir:

// sayfalar/api/abtest.js
sabit değişkenler = ['varyantA', "varyantB"];
ihracatvarsayılanişlevişleyici(talep, res) {
sabit { userId } = talep.sorgu;


// Kullanıcı için rastgele bir değişken oluştur
sabit varyantIndex = Matematik.zemin(Matematik.random() * değişkenler.uzunluk);
sabit varyant = varyantlar[variantIndex];


// Değişkeni bir tanımlama bilgisinde sakla
 res.setHeader('Set-Çerez', `varyant=${varyant}; Max-Age=604800;`);
// Karşılık gelen varyantı işleyin
eğer (varyant 'varyantA') {
 res.status(200).Göndermek("A varyantına hoş geldiniz!");
 } başka {
 res.status(200).Göndermek("Varyant B'ye hoş geldiniz!");
 }
}

Bu kod, bir site sayfasının iki benzersiz varyasyonu için bir A/B testi çalıştıran bir API arayüzü uç noktasını gösterir. Bu kullanır Matematik.random() kullanıcı için rasgele bir değişken oluşturmak ve bunu bir tanımlama bilgisinde saklamak için bir yöntem res.setHeader yöntem. Bu, kodun müşterinin gelecekteki ziyaretlerinde aynı varyasyonu görmesini sağlamasına olanak tanır.

Kod daha sonra şunu kullanır: varyant uygun değişkeni oluşturmak için çerezin değeri. Hangi varyantı seçtiğini belirten bir mesaj görüntüler.

Geliştiriciler, Edge işlevlerini kullanarak, hangisinin daha iyi performans gösterdiğini görmek için bir uygulamanın veya web sayfasının farklı sürümlerini karşılaştırmak üzere A/B testi adı verilen güçlü bir araç kullanabilir. Kullanıcı davranışı hakkında veri toplayabilir ve kullanıcıları çeşitli varyantlara rastgele atayarak web uygulamasının performansını ve kullanıcı deneyimini iyileştirebilirsiniz.

5. Yanıtları Önbelleğe Alma

Reaksiyon depolama, web yürütmeyi kolaylaştırmak için Next.js'de Edge özelliklerini kullanmanın başka bir yoludur. Sunucuya yapılan istek sayısını azaltmak ve web uygulamasının hızında çalışmak için tepkileri belirli bir süre tutmamıza izin verir.

Next.js'de Edge Capabilities ile reaksiyon depolamayı nasıl gerçekleştirebileceğinizi gösteren bir örnek:

// sayfalar/api/data.js
sabit veri = { isim: 'John Doe', yaş: 30 };
ihracatvarsayılanişlevişleyici(talep, res) {
// Önbelleğe almayı etkinleştirmek için yanıt başlıklarını ayarlayın
 res.setHeader("Önbellek Kontrolü", 's-maxage=10, bayat-while-revalidate');
// Verileri döndür
 res.status(200).json (veri);
}

Bu örnek, bazı verilerle bir JSON yanıtı döndüren bir API uç noktasını tanımlar.

Reaksiyon başlıklarını kullanarak ayarladık. res.setHeader kullanarak 10 saniyeliğine ayırmayı etkinleştiren teknik s-max-yaş sınır. Bu, CDN'nin yenileme gerektirmeden önce yanıtı on saniyeye kadar önbelleğe alabileceğini gösterir.

biz de kullanıyoruz yeniden doğrulama sırasında bayat Arka planda yeni bir yanıt yapılırken CDN'nin süresi dolmuş önbelleğe alınmış bir yanıtı sunmasına izin veren parametre. Önbelleğe alınan yanıtın süresi dolmuş olsa bile, CDN yeni bir tane oluşturacak ve her zaman bir yanıt gönderecektir.

Edge işlevleri yanıt önbelleğe alma, web uygulamasını hızlandırmanın ve sunucuya yapılan isteklerin sayısını azaltmanın mükemmel bir yoludur. Yanıtları önceden belirlenmiş bir süre için önbelleğe alarak kullanıcılara daha hızlı ve daha duyarlı web siteleri garanti edebilirsiniz.

Edge İşlevleri, Next.js'nin İnanılmaz Güçlü Bir Özelliğidir

Next.js'nin Edge işlevleri desteği, özel, sunucusuz işlevleri uç ağda son kullanıcıya daha yakın çalıştırmanıza izin veren ilgi çekici bir özelliktir.

Web uygulamalarını geliştirmek için Edge işlevlerini kullanmanın birkaç yolu vardır: A/B testi, yanıt önbelleğe alma, dinamik yönlendirme, veri alma, kimlik doğrulama.

Mimarinizde Edge yeteneklerini kullanmak, müşterilerinizin deneyimini iyileştirebilir ve daha hızlı, daha duyarlı web uygulamalarıyla sonuçlanabilir.