Czym są funkcje krawędzi w Next.js? 5 sposobów, w jakie możesz ich użyć

Next.js to popularna platforma typu open source do tworzenia aplikacji React renderowanych po stronie serwera. Dzięki łatwości użytkowania i możliwości adaptacji można go używać do tworzenia złożonych aplikacji internetowych.

Funkcje brzegowe to jedna z najbardziej ekscytujących funkcji Next.js. Poznaj funkcje Edge i pięć sposobów korzystania z nich w Next.js.

Czym są funkcje krawędziowe?

Zaawansowana funkcja funkcji Edge Next.js umożliwia uruchamianie niestandardowych funkcji bezserwerowych bliżej użytkownika końcowego w sieci brzegowej. Oznacza to, że kod działa na serwerach położonych bliżej klienta, co zapewnia szybsze i lepsze działanie aplikacji internetowych.

Funkcje brzegowe mogą zmieniać żądanie lub odpowiedź, pobierać dane, uwierzytelniać i nie tylko.

Funkcje Edge działają natychmiast. Ponieważ skracają czas ładowania danych i renderowania stron, możesz użyć funkcji Edge, aby poprawić wydajność sieci i wygodę użytkownika.

Potrzebne gadżety nowoczesne i nowej generacji przetwarzanie brzegowe ponieważ jest bardziej niezawodny i bezpieczny niż Chmura obliczeniowa i wykorzystuje funkcje Edge. Ponadto jest bardziej wydajny i elastyczny niż samo przetwarzanie na urządzeniu.

Oto kilka sposobów wykorzystania funkcji Edge w Next.js.

1. Routing dynamiczny

Jednym ze sposobów korzystania z funkcji Edge w Next.js jest routing dynamiczny. Trasy niestandardowe można definiować i zarządzać nimi na podstawie danych dynamicznych, takich jak parametry zapytania lub nagłówki żądań.

Jest to cenne przy tworzeniu bardziej elastycznych i dynamicznych aplikacji internetowych, które obsługują różne żądania.

Możesz użyć funkcji Edge Next.js do zaimplementowania routingu dynamicznego w następujący sposób:

// pages/api/[slug].js
eksportdomyślnyfunkcjonowaćtreser(żądanie, rez) {
konst { ślimak } = żądanie.zapytanie;
Jeśli (ślimak 'o') {
 res.status(200).wysłać(„To jest strona z informacjami!”);
 } w przeciwnym razieJeśli (ślimak 'kontakt') {
 res.status(200).wysłać(„To jest strona kontaktowa!”);
 } w przeciwnym razie {
 res.status(404).wysłać('Strona nie znaleziona.');
 }
}

Ten przykład pokazuje zawartość pliku o nazwie [slug.js] w strony/api katalog, aby zdefiniować niestandardową trasę z danymi dynamicznymi. Granica ślimaka jest następnie usuwana z zapytania żądania za pomocą zapytanie, który pozwala radzić sobie z żądaniami silnie opartymi na wartości ślimak.

Na przykład, jeśli użytkownik przejdzie do http://example.com/api/about, parametr ślimaka zostanie ustawiony na o. The treser uruchomi odpowiedni blok kodu i wyświetli komunikat „Oto strona!”

Jeśli klient odwiedzi http://example.com/api/contact, treser zwróci komunikat „To jest strona kontaktowa!”

Korzystając z funkcji Edge do dynamicznego routingu, programiści mogą tworzyć bardziej elastyczne i dynamiczne aplikacje internetowe, które mogą obsługiwać różne żądania w oparciu o zmieniające się dane.

2. Pobieranie danych

W Next.js jednym z powszechnych przypadków użycia funkcji Edge jest pobieranie danych. Możesz zmniejszyć obciążenie serwera i zwiększyć wydajność aplikacji internetowej, przesyłając dane na brzeg.

Funkcje Edge w Next.js mogą pobierać dane, jak pokazano w tym przykładzie:

// pages/api/users/[identyfikator].js
eksportdomyślnyasynchronicznyfunkcjonowaćtreser(żądanie, rez) {
konst { id } = żądanie.zapytanie;
// Pobierz dane użytkownika z interfejsu API innej firmy
konst odpowiedź = czekać na aportować(` https://api.example.com/users/${identyfikator}`);
konst użytkownik = czekać na odpowiedź.json();
// Zwróć dane użytkownika
 res.status(200.json (użytkownik);
}

W tym przykładzie zdefiniowano punkt końcowy interfejsu API, który używa ID parametr zapytania do pobierania danych użytkownika z interfejsu API innej firmy. Używając aportować możesz wysłać żądanie do API, a następnie czekać na odpowiedź za pomocą słowa kluczowego await.

Następnie kod wyodrębnia informacje JSON, wywołując odpowiedź.json() i przechowuje go w zmiennej. Wreszcie używa tzw json metodę odpowiedzi, aby sformatować dane odpowiedzi jako JSON.

Pobieranie danych z funkcji brzegowej to zaawansowana technika, która umożliwia pobieranie danych z brzegów sieci, zmniejszając obciążenie serwera i poprawiając wydajność aplikacji internetowych.

Możesz również zmniejszyć bezczynność popytu i zapewnić klientom szybsze, bardziej responsywne strony, uzyskując informacje z zewnętrznego interfejsu programistycznego na brzegu sieci.

3. Używany w uwierzytelnianiu

Wdrażając reguły kontroli dostępu na brzegu, możesz poprawić bezpieczeństwo swojej aplikacji internetowej i zmniejszyć ryzyko nieautoryzowanego dostępu do wrażliwych danych.

Jako przykład rozważmy funkcję, która sprawdza stan uwierzytelnienia klienta i wyświetla go z powrotem w odpowiedzi. Oto zarys weryfikacji obejmującej możliwości Edge w Next.js:

// pages/api/auth.js
eksportdomyślny (wymaganie, res) => {
konst { isAuthenticated } = req.cookies;
Jeśli (jest uwierzytelniony) {
 res.status(200.json({ wiadomość: „Jesteś uwierzytelniony” });
 } w przeciwnym razie {
 res.status(401.json({ wiadomość: „Nie jesteś uwierzytelniony” });
 }
}

Na tej ilustracji funkcja Edge sprawdza plik cookie pod kątem tokenu uwierzytelniania i, jeśli zostanie znaleziony, generuje odpowiedź JSON z informacjami o użytkowniku.

4. Test A/B

Innym sposobem wykorzystania funkcji Edge Next.js jest optymalizacja wydajności aplikacji internetowej za pomocą testów A/B. Możesz porównać różne wersje strony internetowej lub aplikacji za pomocą testów A/B, aby określić, która z nich działa lepiej.

Ilustracja tego, w jaki sposób funkcje Edge Next.js mogą być używane do przeprowadzania testów A/B, jest następująca:

// pages/api/abtest.js
konst warianty = [„wariant A”, „wariant B”];
eksportdomyślnyfunkcjonowaćtreser(żądanie, rez) {
konst { userId } = żądanie.zapytanie;
// Wygeneruj losowy wariant dla użytkownika
konst Indeks wariantu = Matematyka.podłoga(Matematyka.random() * warianty.długość);
konst wariant = warianty [indeks wariantu];
// Zapisz wariant w pliku cookie
 res.setHeader(„Ustaw plik cookie”, `wariant=${wariant}; Maksymalny wiek=604800;`);
// Renderuj odpowiedni wariant
Jeśli (wariant „wariant A”) {
 res.status(200).wysłać(„Witamy w wariancie A!”);
 } w przeciwnym razie {
 res.status(200).wysłać(„Witamy w wariancie B!”);
 }
}

Ten kod przedstawia punkt końcowy interfejsu API, który uruchamia test A/B dla dwóch unikalnych odmian strony witryny. Używa Matematyka.losowe() metodę tworzenia losowego wariantu dla użytkownika i zapisuje go w pliku cookie z rozszerzeniem res.setHeader metoda. Dzięki temu kod gwarantuje, że klient zobaczy tę samą odmianę podczas przyszłych wizyt.

Następnie kod używa wariant wartość pliku cookie, aby wyświetlić odpowiedni wariant. Wyświetla komunikat wskazujący, który wariant wybrał.

Korzystając z funkcji Edge, programiści mogą korzystać z potężnego narzędzia zwanego testami A/B, aby porównywać różne wersje aplikacji lub strony internetowej i sprawdzać, która z nich działa lepiej. Możesz zbierać dane o zachowaniach użytkowników i poprawiać wydajność aplikacji internetowej oraz wygodę użytkownika, losowo przypisując użytkowników do różnych wariantów.

5. Buforowanie odpowiedzi

Przechowywanie reakcji to kolejny sposób wykorzystania funkcji Edge w Next.js do usprawnienia wykonywania stron internetowych. Pozwala nam to zachować reakcje przez określony czas, aby zmniejszyć liczbę żądań kierowanych do serwera i pracować nad szybkością działania aplikacji internetowej.

Oto ilustracja tego, jak można przeprowadzić przechowywanie reakcji za pomocą Edge Capabilities w Next.js:

// pages/api/data.js
konst dane = { nazwa: 'Nieznany z nazwiska', wiek: 30 };
eksportdomyślnyfunkcjonowaćtreser(żądanie, rez) {
// Ustaw nagłówki odpowiedzi, aby włączyć buforowanie
 res.setHeader(„Kontrola pamięci podręcznej”, 's-maxage=10, nieaktualne-podczas ponownej walidacji');
// Zwróć dane
 res.status(200.json (dane);
}

W tym przykładzie zdefiniowano punkt końcowy interfejsu API, który zwraca odpowiedź JSON z niektórymi danymi.

Ustawiamy nagłówki reakcji za pomocą res.setHeader technika umożliwiająca rezerwację na 10 sekund za pomocą s-max-wiek granica. Oznacza to, że CDN może przechowywać odpowiedź w pamięci podręcznej przez maksymalnie dziesięć sekund przed wymaganiem odświeżenia.

Korzystamy również z nieaktualne podczas ponownej walidacji parametr, aby umożliwić usłudze CDN obsługę odpowiedzi z pamięci podręcznej, która wygasła, podczas gdy w tle jest tworzona nowa odpowiedź. Nawet jeśli odpowiedź z pamięci podręcznej wygasła, CDN wygeneruje nową i zawsze wyśle ​​odpowiedź.

Buforowanie odpowiedzi funkcji brzegowych to doskonały sposób na przyspieszenie aplikacji internetowej i zmniejszenie liczby żądań do serwera. Możesz zagwarantować użytkownikom szybsze i bardziej responsywne strony internetowe, buforując odpowiedzi przez określony czas.

Funkcje krawędziowe to niezwykle potężna funkcja Next.js

Obsługa funkcji Edge przez Next.js to atrakcyjna funkcja, która umożliwia uruchamianie niestandardowych, bezserwerowych funkcji bliżej użytkownika końcowego w sieci brzegowej.

Istnieje kilka sposobów wykorzystania funkcji Edge do ulepszania aplikacji internetowych: testy A/B, buforowanie odpowiedzi, routing dynamiczny, pobieranie danych, uwierzytelnianie.

Korzystanie z funkcji Edge w Twojej architekturze może poprawić doświadczenia klientów i skutkować szybszymi, bardziej responsywnymi aplikacjami internetowymi.