Next.js-serveracties gebruiken

De 13.4-release van Next.js kwam met een stabiele app-router en de mogelijkheid om gegevensmutaties uit te voeren met serveracties. Deze functie is een absolute game-wisselaar omdat u gegevensmutaties volledig vanaf servercomponenten kunt uitvoeren. Dit brengt tal van voordelen met zich mee op het gebied van snelheid, beveiliging en algehele prestaties van de app.

Ontdek wat serveracties zijn en hoe u deze nieuwe functie kunt gebruiken in uw Next.js-toepassing.

Wat zijn serveracties?

Met serveracties kunt u eenmalige functies aan de serverzijde naast uw servercomponenten schrijven. Dit is enorm omdat u niet langer API-routes hoeft te schrijven bij het indienen van formulieren of het uitvoeren van enige andere vorm van gegevensmutatie, inclusief GraphQL-gegevensmutaties.

U kunt functies hebben die op uw server worden uitgevoerd en u kunt ze vervolgens aanroepen vanuit client- of servercomponenten. Dit is een alfafunctie in Next.js 13.4 en is gebouwd bovenop React Actions. Het gebruik van serveracties leidt tot minder JavaScript aan de clientzijde en kan u helpen steeds verder verbeterde formulieren te maken.

Voorbeeld van serveracties

Met serveracties kunt u mutaties uitvoeren binnen Next.js, op de server. Bekijk deze nieuwe functie met een voorbeeld Next.js-pagina die een formulier weergeeft waarmee u een bericht kunt maken.

Dit zijn de invoer:

importeren Koppeling van"volgende/link"
importeren FormGroep van"@/componenten/FormGroup"
importeren { revalidateTag } van"volgende/cache"
importeren { omleiding } van"volgende/navigatie"

Nu voor de code om het bericht te maken. Deze functie is een serveractie; het draait op de server en stuurt de titel en body van het bericht naar de API (die het bericht in de database maakt):

asynchroonfunctiecreatePost(gegevens) {
"server gebruiken"
const titel = data.get("titel")
const body = data.get("lichaam")
wachten ophalen(" http://127.0.0.1/posts", {
 koptekst: {"Content-Type": "toepassing/json"},
 methode: POST,
 lichaam: JSON.stringify({titel, body})
 })
 opnieuw validerenTag("berichten")
 omleiden("/")
}

Deze functie haalt de titel en body van het bericht op die vervolgens naar het /posts eindpunt via een POST-verzoek. Vervolgens dwingt het de cache om inhoud te vernieuwen die is gekoppeld aan de tag "posts", en wordt deze teruggeleid naar de startpagina.

Hier is een formulier om de titel en body van het nieuwe bericht te verzamelen:

exporterenstandaard NieuwPostForm() {
opbrengst (





"titel">Titel</label>
"tekst" naam="titel" identiteitsbewijs="titel" />
 </FormGroup>
 </div>




"titel">Lichaam</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> Opslaan <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Je kunt zien dat het formulier geen logica bevat met betrekking tot het maken van de post, alleen een formulieractie: de functie <strong>createPost()</strong>. Bedenk dat de createPost-functie de "use server" -richtlijn heeft die verklaart dat alles daarin functie zou op de server moeten draaien.</p> <p>Alle code draait op de server en uw cliënt weet niets over het. Dit komt omdat het formulier een servercomponent is en er niets dynamisch wordt weergegeven op het client.</p> <p>Als u op de knop <strong>Opslaan</strong> klikt, roept Next.js de <strong>createPost()</strong> functie. Hierdoor worden de titel en hoofdtekst als formuliergegevens verzonden, die naar de lokale API worden gepost om de informatie op te slaan.</p> <h2 id="revalidating-the-post"> De post opnieuw valideren </h2> <p>Onderaan de functie <strong>createPost()</strong> staat de volgende coderegel:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Om te begrijpen wat die functie doet, stel je voor dat je een berichtenpagina hebt. Binnen de posts-component zou je een functie met de naam <strong>getPosts()</strong> aanroepen om alle posts uit je database te halen en ze weer te geven zodat de gebruiker ze kan zien:</p> <pre> <code><span>exporteren</span> <span>standaard</span> <span>async</span> <span><span>function</span> <span>Berichten</span>() span>{<br> <span>const</span> posts = <span>wacht</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> })}<br> <<span>/div></span><br> )<br>}<br>  <p>De functie <strong>getPosts()</strong> zou er als volgt uitzien:</p> <pre> <code><span>async</span> <span><span>functie</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>wacht</span> ophalen(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> next: {<span>tags</span>: [<span>"posts"</span>], <span>hervalideren</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Deze functie geeft de <strong>volgende</strong> optie door om op te halen, zodat u een hervalidatieperiode kunt instellen. Standaard wordt elk ophaalverzoek dat u binnen de servercomponent doet, voor altijd in de cache opgeslagen. Het bijhouden van de cache en het vernieuwen wanneer nodig is een belangrijk onderdeel van <span>het ophalen van gegevens Next.js</span>.</p> <p>De bovenstaande code vertelt Next.js om de <strong>posts</strong>-gegevens maximaal een uur in de cache op te slaan (3.600 seconden). Na een uur worden de gegevens verouderd en vernieuwt Next.js deze om de meest recente gegevens uit de database te halen.</p> <p>Onthoud dat de functie <strong>createPost()</strong> roept <strong>revalidateTag("posts")</strong> aan zodra de rest van het werk is voltooid. Dit dwingt Next.js om die gegevens opnieuw op te halen, waaronder het nieuwe bericht dat de app zojuist heeft gemaakt.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Bewijs dat uw code op de server draait </h2> <p>Om er zeker van te zijn dat alle code op de server draait, kunt u de volgende console-loginstructie toevoegen aan het <strong>createPost()</strong> functie:</p> <pre> <code><span>console</span>.log(<span>"Running on the server"</span>)</code> </pre> <p>Probeer vervolgens een nieuw bericht te maken door op de verzendknop te klikken. Als uw code op de server draait, verschijnt dat logbericht op uw terminal. Maar als het op de client draait, wordt het logboek weergegeven in de browserconsole.</p> <p>Dit maakt het veilig om gevoelige informatie zoals omgevingsvariabelen, databaseverbindingen en wachtwoorden op de server zonder bang te hoeven zijn dat deze wordt blootgesteld aan de cliënt. U kunt dan <span>de strings uit uw .env-bestand lezen</span> in uw Next.js-app.</p> <p>U mag wil het gebruik van serveracties reserveren voor versies van Next.js later dan 13.4, vooral in productie. Maar het is nog steeds heel spannend om te zien waar deze functie heen gaat, aangezien het constant pusht wat je kunt doen door steeds meer dingen naar de server te verplaatsen. Het zou het schrijven van uw client-apps moeten vergemakkelijken en het ontwikkelproces veel leuker maken.</p> <h2 id="learn-more-about-migrating-to-next-js"> Meer informatie over migreren naar Next .js </h2> <p>Veel front-end ontwikkelaars gebruiken React voor UI-ontwikkeling. Maar dankzij functies zoals weergave aan de serverzijde en het genereren van statische sites, migreren veel van deze ontwikkelaars hun apps om Next.js te gebruiken. Deze migratie is heel eenvoudig, aangezien React qua syntaxis vrij gelijkaardig is aan Next.js.</p> <p>De extra prestatie- en beveiligingsboost maken de migratie zelfs nog noodzakelijker. De mogelijkheid om componenten aan de serverzijde te hebben, in combinatie met de nieuwe serveracties die we zojuist hebben besproken, maakt Next.js een veiligere en beter presterende optie in vergelijking met gewone React. Als React-ontwikkelaar moet u leren hoe u uw app migreert naar Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>