Πώς να χρησιμοποιήσετε τις Ενέργειες διακομιστή Next.js

Η έκδοση 13.4 του Next.js συνοδεύτηκε από έναν σταθερό δρομολογητή εφαρμογής και τη δυνατότητα μετάλλαξης δεδομένων με ενέργειες διακομιστή. Αυτή η δυνατότητα είναι μια απόλυτη αλλαγή παιχνιδιών, επειδή σας επιτρέπει να εκτελείτε μεταλλάξεις δεδομένων εξ ολοκλήρου από στοιχεία διακομιστή. Αυτό επιφέρει μια σειρά από οφέλη σε τομείς όπως η ταχύτητα, η ασφάλεια και η συνολική απόδοση της εφαρμογής.

Μάθετε ποιες είναι οι ενέργειες διακομιστή και πώς να χρησιμοποιήσετε αυτήν τη νέα δυνατότητα στην εφαρμογή Next.js.

Τι είναι οι ενέργειες διακομιστή;

Οι ενέργειες διακομιστή σάς επιτρέπουν να γράψετε μεμονωμένες λειτουργίες από την πλευρά του διακομιστή δίπλα στα στοιχεία του διακομιστή σας. Αυτό είναι τεράστιο επειδή δεν χρειάζεται πλέον να γράφετε διαδρομές API όταν υποβάλλετε φόρμες ή κάνετε οποιοδήποτε άλλο είδος μετάλλαξης δεδομένων, συμπεριλαμβανομένων Μεταλλάξεις δεδομένων GraphQL.

Μπορείτε να έχετε λειτουργίες που εκτελούνται στον διακομιστή σας και, στη συνέχεια, μπορείτε να τις καλέσετε από στοιχεία πελάτη ή διακομιστή. Αυτή είναι μια δυνατότητα άλφα στο Next.js 13.4 και είναι χτισμένη πάνω από το React Actions. Η χρήση ενεργειών διακομιστή οδηγεί σε μειωμένη JavaScript από την πλευρά του πελάτη και μπορεί να σας βοηθήσει να δημιουργήσετε προοδευτικά βελτιωμένες φόρμες.

Παράδειγμα ενεργειών διακομιστή

Με τις ενέργειες διακομιστή, μπορείτε να εκτελέσετε μεταλλάξεις στο Next.js, στον διακομιστή. Ρίξτε μια ματιά σε αυτή τη νέα δυνατότητα με ένα παράδειγμα σελίδας Next.js που αποδίδει μια φόρμα που σας επιτρέπει να δημιουργήσετε μια ανάρτηση.

Εδώ είναι οι εισαγωγές:

εισαγωγή Σύνδεσμος από"επόμενο/σύνδεσμος"
εισαγωγή FormGroup από"@/components/FormGroup"
εισαγωγή { revalidateTag } από"επόμενο/κρυφή μνήμη"
εισαγωγή { ανακατεύθυνση } από"επόμενο/πλοήγηση"

Τώρα για τον κώδικα για τη δημιουργία της ανάρτησης. Αυτή η λειτουργία είναι μια ενέργεια διακομιστή. εκτελείται στον διακομιστή και στέλνει τον τίτλο και το σώμα της ανάρτησης στο API (το οποίο δημιουργεί τη δημοσίευση στη βάση δεδομένων):

ασυγχρονισμόςλειτουργίαcreatePost(δεδομένα) {
"χρήση διακομιστή"
συνθ τίτλος = data.get("τίτλος")
συνθ body = data.get("σώμα")
αναμένω φέρω(" http://127.0.0.1/posts", {
 κεφαλίδα: {"Τύπος περιεχομένου": "application/json"},
 μέθοδος: POST,
 σώμα: JSON.stringify({τίτλος, σώμα})
 })
 revalidateTag("αναρτήσεις")
 διευθύνω πάλιν("/")
}

Αυτή η συνάρτηση λαμβάνει τον τίτλο και το σώμα της ανάρτησης που στη συνέχεια στέλνει στο /posts τελικό σημείο μέσω αιτήματος POST. Στη συνέχεια, αναγκάζει τη μνήμη cache να ανανεώσει το περιεχόμενο που σχετίζεται με την ετικέτα "posts" και ανακατευθύνει πίσω στην αρχική σελίδα.

Ακολουθεί μια φόρμα για τη συλλογή του τίτλου και του σώματος της νέας ανάρτησης:

εξαγωγήΠροκαθορισμένο NewPostForm() {
ΕΠΙΣΤΡΟΦΗ (





"τίτλος">Τίτλος</label>
"κείμενο" όνομα="τίτλος" id="τίτλος" />
 </FormGroup>
 </div>




"τίτλος">Σώμα</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> Αποθήκευση <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Μπορείτε να δείτε ότι η φόρμα δεν περιέχει λογική που να σχετίζεται με τη δημιουργία της ανάρτησης, απλώς μια ενέργεια φόρμας: τη συνάρτηση <strong>createPost()</strong>. Θυμηθείτε ότι η συνάρτηση createPost έχει την οδηγία "χρήση διακομιστή" η οποία δηλώνει ότι τα πάντα σε αυτό η λειτουργία πρέπει να εκτελείται στον διακομιστή.</p> <p>Όλος ο κώδικας εκτελείται στον διακομιστή και ο πελάτης σας δεν γνωρίζει τίποτα σχετικά με αυτό. Αυτό συμβαίνει επειδή η φόρμα είναι ένα στοιχείο διακομιστή και δεν υπάρχει τίποτα που να αποδίδεται δυναμικά στο πελάτη.</p> <p>Όταν κάνετε κλικ στο κουμπί <strong>Αποθήκευση</strong>, το Next.js καλεί το <strong>createPost()</strong> λειτουργία. Αυτό στέλνει τον τίτλο και το σώμα ως δεδομένα φόρμας, τα οποία δημοσιεύονται στο τοπικό API για αποθήκευση των πληροφοριών.</p> <h2 id="revalidating-the-post"> Επανακύρωση της ανάρτησης </h2> <p>Στο κάτω μέρος της συνάρτησης <strong>createPost()</strong> βρίσκεται η ακόλουθη γραμμή κώδικα:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>Για να κατανοήσετε τι κάνει αυτή η λειτουργία, φανταστείτε ότι έχετε μια σελίδα αναρτήσεων. Μέσα στο στοιχείο αναρτήσεων, θα καλούσατε μια συνάρτηση με το όνομα <strong>getPosts()</strong> για να λάβετε όλες τις αναρτήσεις από τη βάση δεδομένων σας και να τις αποδώσετε για να τις δει ο χρήστης:</p> <pre> <code><span>εξαγωγή</span> <span>προεπιλογή</span> <span>ασυγχρονισμός</span> <span><span>λειτουργία</span> <span>Αναρτήσεις</span>() span>{<br> <span>const</span> αναρτήσεις = <span>αναμονή</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>Η συνάρτηση <strong>getPosts()</strong> θα μοιάζει με αυτό:</p> <pre> <code><span>ασυγχρονισμός</span> <span><span>συνάρτηση</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>αναμονή</span> fetch(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> επόμενο: {<span>ετικέτες</span>: [<span>"posts"</span>], <span>επαναεπικύρωση</span>: <span>3600</span> <br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Αυτή η συνάρτηση περνά την επιλογή <strong>επόμενο</strong> για ανάκτηση, επιτρέποντάς σας να ορίσετε μια περίοδο επανεπικύρωσης. Από προεπιλογή, κάθε αίτημα ανάκτησης που κάνετε μέσα στο στοιχείο διακομιστή αποθηκεύεται προσωρινά στην προσωρινή μνήμη για πάντα. Η παρακολούθηση της προσωρινής μνήμης και η ανανέωσή της όταν είναι απαραίτητο είναι ένα σημαντικό μέρος της <span> ανάκτησης δεδομένων Next.js</span>.</p> <p>Ο παραπάνω κώδικας λέει στο Next.js να αποθηκεύσει προσωρινά τα δεδομένα <strong>αναρτήσεων</strong> για έως και μία ώρα (3.600 δευτερόλεπτα). Μετά από μια ώρα, τα δεδομένα γίνονται μπαγιάτικα και το Next.js τα ανανεώνει για να λάβει τα πιο πρόσφατα δεδομένα από τη βάση δεδομένων.</p> <p>Να θυμάστε ότι η συνάρτηση <strong>createPost()</strong> καλεί το <strong>revalidateTag("posts")</strong> μόλις ολοκληρώσει την υπόλοιπη εργασία της. Αυτό αναγκάζει το Next.js να ανακτήσει εκ νέου αυτά τα δεδομένα που θα πρέπει να περιλαμβάνουν τη νέα ανάρτηση που μόλις δημιούργησε η εφαρμογή.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Απόδειξη ότι ο κωδικός σας εκτελείται στον διακομιστή </h2> <p>Για να είστε σίγουροι ότι όλος ο κώδικας εκτελείται στον διακομιστή, μπορείτε να προσθέσετε την ακόλουθη δήλωση καταγραφής της κονσόλας μέσα στο Λειτουργία <strong>createPost()</strong>:</p> <pre> <code><span>κονσόλα</span>.log(<span>"Εκτελείται στον διακομιστή"</span>)</code> </pre> <p>Στη συνέχεια, προσπαθήστε να δημιουργήσετε μια νέα ανάρτηση κάνοντας κλικ στο κουμπί υποβολή. Εάν ο κώδικάς σας εκτελείται στον διακομιστή, αυτό το μήνυμα καταγραφής θα εμφανιστεί στο τερματικό σας. Αλλά εάν εκτελείται στον υπολογιστή-πελάτη, τότε το αρχείο καταγραφής θα εμφανιστεί στην κονσόλα του προγράμματος περιήγησης.</p> <p>Αυτό καθιστά ασφαλή τη θέση του ευαίσθητου περιεχομένου. πληροφορίες όπως περιβαλλοντικές μεταβλητές, συνδέσεις βάσης δεδομένων και κωδικούς πρόσβασης στο διακομιστή χωρίς φόβο μήπως εκτεθεί σε πελάτης. Στη συνέχεια, μπορείτε να <span>διαβάσετε τις συμβολοσειρές από το αρχείο σας .env</span> στην εφαρμογή Next.js.</p> <p>Μπορείτε να κάνετε θέλετε να δεσμεύσετε τη χρήση ενεργειών διακομιστή για εκδόσεις του Next.js μεταγενέστερες της 13.4, ειδικά σε παραγωγή. Αλλά εξακολουθεί να είναι πραγματικά συναρπαστικό να βλέπεις πού πηγαίνει αυτή η δυνατότητα, καθώς προωθεί συνεχώς αυτό που μπορείς να κάνεις μεταφέροντας όλο και περισσότερα πράγματα στον διακομιστή. Θα πρέπει να διευκολύνει τη σύνταξη των εφαρμογών πελατών σας και τη διαδικασία ανάπτυξής τους πολύ πιο ευχάριστη.</p> <h2 id="learn-more-about-migrating-to-next-js"> Μάθετε περισσότερα σχετικά με τη μετεγκατάσταση στο επόμενο. .js </h2> <p>Πολλοί προγραμματιστές διεπαφής χρησιμοποιούν το React για ανάπτυξη διεπαφής χρήστη. Ωστόσο, χάρη σε λειτουργίες όπως η απόδοση από την πλευρά του διακομιστή και η δημιουργία στατικών ιστότοπων, πολλοί από αυτούς τους προγραμματιστές μεταφέρουν τις εφαρμογές τους για να χρησιμοποιήσουν το Next.js. Αυτή η μετεγκατάσταση είναι πολύ απλή, καθώς το React είναι αρκετά παρόμοιο με το Next.js από άποψη σύνταξης.</p> <p>Η πρόσθετη ενίσχυση απόδοσης και ασφάλειας καθιστούν αναγκαία τη μετεγκατάσταση ακόμη περισσότερο. Η δυνατότητα ύπαρξης στοιχείων από την πλευρά του διακομιστή, σε συνδυασμό με τις νέες ενέργειες διακομιστή που μόλις καλύψαμε, καθιστά το Next.js πιο ασφαλή και αποδοτική επιλογή σε σύγκριση με το απλό React. Ως προγραμματιστής του React, θα πρέπει να μάθετε πώς να κάνετε μετεγκατάσταση της εφαρμογής σας στο Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>