Was sind Kantenfunktionen in Next.js? 5 Möglichkeiten, wie Sie sie verwenden können

Next.js ist ein beliebtes Open-Source-Framework für die Entwicklung serverseitig gerenderter React-Anwendungen. Dank seiner Benutzerfreundlichkeit und Anpassungsfähigkeit können Sie damit komplexe Webanwendungen erstellen.

Edge-Funktionen sind eine der aufregendsten Funktionen von Next.js. Erfahren Sie mehr über Edge-Funktionen und fünf Möglichkeiten, sie in Next.js zu verwenden.

Was sind Kantenfunktionen?

Mit der leistungsstarken Edge-Funktionsfunktion von Next.js können Sie benutzerdefinierte serverlose Funktionen näher am Endbenutzer im Edge-Netzwerk ausführen. Dies bedeutet, dass der Code auf Servern ausgeführt wird, die geografisch näher am Client liegen, was zu einer schnelleren und leistungsfähigeren Leistung in Webanwendungen führt.

Edge-Funktionen können die Anfrage oder Antwort ändern, Daten abrufen, authentifizieren und mehr.

Edge-Funktionen werden sofort ausgeführt. Da sie die zum Laden von Daten und Rendern von Seiten benötigte Zeit verkürzen, können Sie Edge-Funktionen verwenden, um die Webleistung und das Benutzererlebnis zu verbessern.

Moderne Gadgets und Gadgets der nächsten Generation benötigen Edge-Computing weil es zuverlässiger und sicherer ist als Cloud Computing und nutzt Edge-Funktionen. Darüber hinaus ist es leistungsfähiger und flexibler als das reine Rechnen auf dem Gerät.

Hier sind einige Möglichkeiten, wie Sie Edge-Funktionen in Next.js verwenden können.

1. Dynamisches Routing

Eine Möglichkeit, Edge-Funktionen in Next.js zu verwenden, ist das dynamische Routing. Sie können benutzerdefinierte Routen basierend auf dynamischen Daten wie Abfrageparametern oder Anforderungsheadern definieren und verwalten.

Dies ist wertvoll, um anpassungsfähigere und dynamischere Webanwendungen zu erstellen, die verschiedene Anforderungen bearbeiten.

Sie können die Edge-Funktionen von Next.js verwenden, um dynamisches Routing auf folgende Weise zu implementieren:

// seiten/api/[slug].js
ExportStandardFunktionHandler(req, res) {
const { slug } = req.query;
Wenn (Schnecke 'um') {
 res.status(200).schicken(„Das ist die About-Seite!“);
 } andersWenn (Schnecke 'Kontakt') {
 res.status(200).schicken(„Dies ist die Kontaktseite!“);
 } anders {
 res.status(404).schicken('Seite nicht gefunden.');
 }
}

Dieses Beispiel zeigt den Inhalt einer Datei mit dem Namen [slug.js] im Seiten/API Verzeichnis, um eine benutzerdefinierte Route mit dynamischen Daten zu definieren. Die Slug-Grenze wird dann mithilfe von aus der Anforderungsabfrage entfernt Anforderungsabfrage, mit dem Sie Anforderungen bewältigen können, die stark auf dem Wert des Produkts basieren Schnecke.

Zum Beispiel, wenn ein Benutzer auf geht http://example.com/api/about, Der Slug-Parameter wird auf gesetzt um. Der Handler Die Funktion führt den entsprechenden Codeblock aus und zeigt die Meldung „Dies ist die About-Seite!“ an.

Wenn der Kunde zu Besuch kommt http://example.com/api/contact, Handler gibt die Meldung „Dies ist die Kontaktseite!“ zurück.

Mithilfe von Edge-Funktionen für dynamisches Routing können Entwickler anpassungsfähigere und dynamischere Webanwendungen erstellen, die verschiedene Anforderungen basierend auf sich ändernden Daten verarbeiten können.

2. Datenabruf

In Next.js ist das Abrufen von Daten ein häufiger Anwendungsfall für Edge-Funktionen. Sie können die Belastung des Servers reduzieren und die Leistung der Webanwendung steigern, indem Sie Daten an den Rand bringen.

Die Edge-Funktionen von Next.js können den Datenabruf durchführen, wie in diesem Beispiel gezeigt:

// seiten/api/users/[id].js
ExportStandardasynchronFunktionHandler(req, res) {
const { id } = req.query;
// Benutzerdaten von einer Drittanbieter-API abrufen
const Antwort = erwarten bringen(` https://api.example.com/users/${id}`);
const Benutzer = erwarten Antwort.json();
// Benutzerdaten zurückgeben
 res.status(200.json (Benutzer);
}

In diesem Beispiel wird ein API-Endpunkt definiert, der die verwendet Ausweis Abfrageparameter zum Abrufen von Benutzerdaten von einer Drittanbieter-API. Verwendung der bringen Mit der Methode können Sie eine Anfrage an die API senden und dann mit dem Schlüsselwort „await“ auf eine Antwort warten.

Der Code extrahiert dann die JSON-Informationen durch Aufruf Antwort.json() und speichert es in einer Variablen. Schließlich verwendet es die json Methode der Antwort, um die Antwortdaten als JSON zu formatieren.

Das Abrufen von Edge-Funktionsdaten ist eine leistungsstarke Technik, mit der Sie Daten am Edge abrufen, die Serverlast reduzieren und die Leistung von Webanwendungen verbessern können.

Sie können auch die Nachfrage-Inaktivität reduzieren und Ihren Kunden schnellere, reaktionsfähigere Seiten bieten, indem Sie Informationen von einer externen Programmierschnittstelle am Edge abrufen.

3. Wird bei der Authentifizierung verwendet

Durch die Implementierung von Zugriffskontrollregeln am Edge können Sie die Sicherheit Ihrer Web-App verbessern und das Risiko eines unbefugten Zugriffs auf sensible Daten verringern.

Betrachten Sie als Beispiel eine Funktion, die den Authentifizierungsstatus eines Clients überprüft und ihn in der Antwort zurückgibt. Hier ist ein Überblick über die Überprüfung mit Edge-Funktionen in Next.js:

// seiten/api/auth.js
ExportStandard (req, res) => {
const { isAuthenticated } = req.cookies;
Wenn (isAuthenticated) {
 res.status(200).json({ Nachricht: „Sie sind authentifiziert“ });
 } anders {
 res.status(401).json({ Nachricht: „Sie sind nicht authentifiziert“ });
 }
}

In dieser Abbildung untersucht die Edge-Funktion das Cookie auf ein Authentifizierungstoken und generiert, falls gefunden, eine JSON-Antwort mit den Benutzerinformationen.

4. Der A/B-Test

Eine weitere Möglichkeit, die Edge-Funktionen von Next.js zu nutzen, besteht darin, die Leistung einer Webanwendung mithilfe von A/B-Tests zu optimieren. Mithilfe von A/B-Tests können Sie verschiedene Versionen einer Website oder Anwendung vergleichen, um festzustellen, welche Version besser abschneidet.

Eine Veranschaulichung, wie die Edge-Funktionen von Next.js zur Durchführung von A/B-Tests verwendet werden können, ist wie folgt:

// seiten/api/abtest.js
const Varianten = ['VarianteA', 'VarianteB'];
ExportStandardFunktionHandler(req, res) {
const { userId } = req.query;
// Generiere eine zufällige Variante für den Benutzer
const variantIndex = Mathematik.Boden(Mathematik.random() * Varianten.length);
const Variante = Varianten[VarianteIndex];
// Variante in einem Cookie speichern
 res.setHeader('Set-Cookie', `variante=${variant}; Max-Alter=604800;`);
// Rendern Sie die entsprechende Variante
Wenn (Variante 'VarianteA') {
 res.status(200).schicken(„Willkommen bei Variante A!“);
 } anders {
 res.status(200).schicken(„Willkommen bei Variante B!“);
 }
}

Dieser Code demonstriert einen API-Schnittstellenendpunkt, der einen A/B-Test für zwei eindeutige Variationen einer Site-Seite ausführt. Es nutzt die Math.random() Methode, um eine zufällige Variante für den Benutzer zu erstellen und diese in einem Cookie mit dem zu speichern res.setHeader Methode. Dadurch kann der Code sicherstellen, dass der Kunde bei zukünftigen Besuchen dieselbe Variation sieht.

Der Code verwendet dann die Variante Cookie-Wert, um die entsprechende Variante darzustellen. Es wird eine Meldung angezeigt, die angibt, welche Variante ausgewählt wurde.

Mithilfe von Edge-Funktionen können Entwickler ein leistungsstarkes Tool namens A/B-Testing nutzen, um verschiedene Versionen einer Anwendung oder Webseite zu vergleichen, um herauszufinden, welche besser abschneidet. Sie können Daten zum Benutzerverhalten sammeln und die Leistung und Benutzererfahrung der Webanwendung verbessern, indem Sie Benutzer nach dem Zufallsprinzip verschiedenen Varianten zuordnen.

5. Antworten zwischenspeichern

Das Speichern von Reaktionen ist eine weitere Möglichkeit, die Edge-Funktionen in Next.js zu nutzen, um die Webausführung zu optimieren. Es ermöglicht uns, Reaktionen für einen bestimmten Zeitraum aufrechtzuerhalten, um die Anzahl der an den Server gerichteten Anfragen zu reduzieren und an der Geschwindigkeit der Webanwendung zu arbeiten.

Hier ist eine Illustration, wie Sie die Reaktionsspeicherung mit Edge Capabilities in Next.js durchführen können:

// seiten/api/data.js
const Daten = { Name: 'John Doe', Alter: 30 };
ExportStandardFunktionHandler(req, res) {
// Antwortheader festlegen, um Caching zu aktivieren
 res.setHeader('Cache-Kontrolle', 's-maxage=10, stale-while-revalidate');
// Daten zurückgeben
 res.status(200).json (Daten);
}

In diesem Beispiel wird ein API-Endpunkt definiert, der eine JSON-Antwort mit einigen Daten zurückgibt.

Wir setzen die Reaktionsheader mit dem res.setHeader Technik, um die Reservierung für 10 Sekunden mit dem zu ermöglichen S-Max-Alter Grenze. Dies weist darauf hin, dass das CDN die Antwort bis zu zehn Sekunden lang zwischenspeichern kann, bevor eine Aktualisierung erforderlich ist.

Wir nutzen auch die Stale-while-revalidate Parameter, damit das CDN eine zwischengespeicherte Antwort bereitstellen kann, die abgelaufen ist, während im Hintergrund eine neue Antwort erstellt wird. Selbst wenn die zwischengespeicherte Antwort abgelaufen ist, generiert das CDN eine neue und sendet immer eine Antwort.

Das Antwort-Caching von Edge-Funktionen ist eine hervorragende Möglichkeit, die Webanwendung zu beschleunigen und die Anzahl der Anfragen an den Server zu reduzieren. Sie können Benutzern schnellere und reaktionsfähigere Websites garantieren, indem Sie Antworten für einen vorgegebenen Zeitraum zwischenspeichern.

Kantenfunktionen sind eine unglaublich leistungsstarke Funktion von Next.js

Die Unterstützung von Edge-Funktionen durch Next.js ist eine überzeugende Funktion, mit der Sie benutzerdefinierte, serverlose Funktionen näher am Endbenutzer im Edge-Netzwerk ausführen können.

Es gibt mehrere Möglichkeiten, Edge-Funktionen zur Verbesserung von Webanwendungen zu nutzen: A/B-Tests, Antwort-Caching, dynamisches Routing, Datenabruf, Authentifizierung.

Der Einsatz von Edge-Funktionen in Ihrer Architektur kann das Erlebnis Ihrer Kunden verbessern und zu schnelleren, reaktionsschnelleren Webanwendungen führen.