So verwenden Sie Next.js-Serveraktionen

Die Version 13.4 von Next.js verfügte über einen stabilen App-Router und die Möglichkeit, Datenmutationen mit Serveraktionen durchzuführen. Diese Funktion ist ein absoluter Game-Changer, da Sie damit Datenmutationen vollständig über Serverkomponenten durchführen können. Dies bringt zahlreiche Vorteile in Bereichen wie Geschwindigkeit, Sicherheit und Gesamtleistung der App mit sich.

Erfahren Sie, was Serveraktionen sind und wie Sie diese neue Funktion in Ihrer Next.js-Anwendung verwenden.

Was sind Serveraktionen?

Mit Serveraktionen können Sie einmalige serverseitige Funktionen direkt neben Ihren Serverkomponenten schreiben. Das ist enorm, da Sie keine API-Routen mehr schreiben müssen, wenn Sie Formulare senden oder andere Arten von Datenmutationen durchführen GraphQL-Datenmutationen.

Sie können Funktionen haben, die auf Ihrem Server ausgeführt werden, und Sie können sie dann von Client- oder Serverkomponenten aufrufen. Dies ist eine Alpha-Funktion in Next.js 13.4 und basiert auf React Actions. Die Verwendung von Serveraktionen führt zu einer Reduzierung von clientseitigem JavaScript und kann Ihnen bei der Erstellung zunehmend verbesserter Formulare helfen.

Beispiel für Serveraktionen

Mit Serveraktionen können Sie Mutationen innerhalb von Next.js auf dem Server durchführen. Schauen Sie sich diese neue Funktion anhand einer Next.js-Beispielseite an, die ein Formular rendert, mit dem Sie einen Beitrag erstellen können.

Hier sind die Importe:

importieren Verknüpfung aus„Weiter/Link“
importieren Gruppe formen aus„@/components/FormGroup“
importieren { revalidateTag } aus„nächster/cache“
importieren { umleiten } aus„Weiter/Navigation“

Nun zum Code zum Erstellen des Beitrags. Diese Funktion ist eine Serveraktion; Es läuft auf dem Server und sendet den Titel und den Text des Beitrags an die API (die den Beitrag in der Datenbank erstellt):

asynchronFunktioncreatePost(Daten) {
„Server verwenden“
const title = data.get("Titel")
const body = data.get("Körper")
erwarten bringen(" http://127.0.0.1/posts", {
 Header: {"Inhaltstyp": „application/json“},
 Methode: POST,
 Körper: JSON.stringify({title, body})
 })
 revalidateTag(„Beiträge“)
 umleiten("/")
}

Diese Funktion ruft den Titel und den Text des Beitrags ab und sendet ihn dann an den /posts Endpunkt über eine POST-Anfrage. Anschließend wird der Cache gezwungen, den mit dem Tag „Beiträge“ verknüpften Inhalt zu aktualisieren, und es wird zurück zur Startseite weitergeleitet.

Hier ist ein Formular zum Sammeln des neuen Beitragstitels und -texts:

ExportStandard NewPostForm() {
zurückkehren (





"Titel">Titel</label>
"Text" name="Titel" id="Titel" />
 </FormGroup>
 </div>




"Titel">Körper</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Speichern <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>><br>  <p>Sie sehen, dass das Formular keine Logik zur Erstellung des Beitrags enthält, sondern nur eine Formularaktion: die Funktion <strong>createPost()</strong>. Denken Sie daran, dass die Funktion „createPost“ die Direktive „use server“ hat, die alles darin deklariert Die Funktion sollte auf dem Server ausgeführt werden.</p> <p>Der gesamte Code wird auf dem Server ausgeführt, und Ihr Client weiß nichts darüber. Dies liegt daran, dass das Formular eine Serverkomponente ist und nichts dynamisch auf dem Formular gerendert wird Client.</p> <p>Wenn Sie auf die Schaltfläche <strong>Speichern</strong> klicken, ruft Next.js <strong>createPost()</strong> auf Funktion. Dadurch werden der Titel und der Text als Formulardaten gesendet, die an die lokale API gesendet werden, um die Informationen zu speichern.</p> <h2 id="revalidating-the-post"> Erneute Validierung des Beitrags </h2> <p>Am Ende der Funktion <strong>createPost()</strong> befindet sich die folgende Codezeile:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Um zu verstehen, was diese Funktion bewirkt, stellen Sie sich vor, Sie hätten eine Beitragsseite. Innerhalb der Posts-Komponente rufen Sie eine Funktion namens <strong>getPosts()</strong> auf, um alle Posts aus Ihrer Datenbank abzurufen und sie für den Benutzer sichtbar darzustellen:</p> <pre> <code><span>export</span> <span>default</span> <span>async</span> <span><span>function</span> <span>Posts</span>() span>{<br> <span>const</span> posts = <span>await</span> getPosts()</span></code><p><code> <span>return</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> }) <<span>/div></span><br> )<br>}<br>  <p>Die Funktion <strong>getPosts()</strong> würde so aussehen:</p> <pre> <code><span>async</span> <span><span>function</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>await</span> fetch(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> next: {<span>tags</span>: [<span>"posts"</span>], <span>revalidate</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Diese Funktion übergibt die Option <strong>next</strong> an den Abruf, sodass Sie einen Zeitraum für die erneute Validierung festlegen können. Standardmäßig wird jede einzelne Abrufanforderung, die Sie innerhalb der Serverkomponente stellen, für immer zwischengespeichert. Das Verfolgen des Caches und dessen Aktualisierung bei Bedarf ist ein wichtiger Teil des <span>Datenabrufs Next.js</span>.</p> <p>Der obige Code weist Next.js an, die <strong>Posts</strong>-Daten bis zu einer Stunde lang zwischenzuspeichern (3.600 Sekunden). Nach einer Stunde sind die Daten veraltet und Next.js aktualisiert sie, um die neuesten Daten aus der Datenbank abzurufen.</p> <p>Denken Sie daran Die Funktion <strong>createPost()</strong> ruft <strong>revalidateTag("posts")</strong> auf, sobald sie den Rest ihrer Arbeit abgeschlossen hat. Dadurch wird Next.js gezwungen, die Daten erneut abzurufen, die den neuen Beitrag enthalten sollten, den die App gerade erstellt hat.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Beweis, dass Ihr Code auf dem Server ausgeführt wird </h2> <p>Um sicherzustellen, dass der gesamte Code auf dem Server ausgeführt wird, können Sie die folgende Konsolenprotokollanweisung hinzufügen <strong>createPost()</strong> Funktion:</p> <pre> <code><span>console</span>.log(<span>"Running on the server"</span>)</code> </pre> <p>Versuchen Sie dann, einen neuen Beitrag zu erstellen, indem Sie auf die Schaltfläche „Senden“ klicken. Wenn Ihr Code auf dem Server ausgeführt wird, wird diese Protokollmeldung auf Ihrem Terminal angezeigt. Wenn es jedoch auf dem Client ausgeführt wird, wird das Protokoll in der Browserkonsole angezeigt.</p> <p>Dadurch ist das Setzen sensibler Daten sicher Informationen wie Umgebungsvariablen, Datenbankverbindungen und Passwörter auf dem Server, ohne befürchten zu müssen, dass sie der Öffentlichkeit zugänglich gemacht werden Klient. Sie können dann <span>die Zeichenfolgen aus Ihrer .env-Datei lesen</span> in Ihrer Next.js-App.</p> <p>Das ist möglich Ich möchte die Nutzung von Serveraktionen für Versionen von Next.js nach 13.4 reservieren, insbesondere in Produktion. Aber es ist immer noch sehr spannend zu sehen, wohin diese Funktion führt, da sie die Möglichkeiten ständig erweitert, indem immer mehr Dinge auf den Server verschoben werden. Es sollte das Schreiben Ihrer Client-Apps einfacher machen und der Prozess ihrer Entwicklung viel angenehmer machen.</p> <h2 id="learn-more-about-migrating-to-next-js"> Erfahren Sie mehr über die Migration zu Next .js </h2> <p>Viele Frontend-Entwickler verwenden React für die UI-Entwicklung. Aber dank Funktionen wie serverseitigem Rendering und statischer Site-Generierung migrieren viele dieser Entwickler ihre Apps, um Next.js zu verwenden. Diese Migration ist sehr unkompliziert, da React in Bezug auf die Syntax Next.js ziemlich ähnlich ist.</p> <p>Die zusätzliche Leistungs- und Sicherheitssteigerung macht die Migration noch notwendiger. Die Möglichkeit, über serverseitige Komponenten zu verfügen, gepaart mit den neuen Serveraktionen, die wir gerade behandelt haben, macht Next.js zu einer sichereren und leistungsfähigeren Option im Vergleich zu einfachem React. Als React-Entwickler sollten Sie lernen, wie Sie Ihre App auf Next.js migrieren.</p> </div></code></p></pre></button>
</div></code></p></span>