Jak korzystać z akcji serwera Next.js

Wersja 13.4 Next.js została dostarczona ze stabilnym routerem aplikacji i możliwością mutacji danych za pomocą działań serwera. Ta funkcja to absolutna rewolucja, ponieważ umożliwia przeprowadzanie mutacji danych w całości z komponentów serwera. Daje to wiele korzyści w obszarach takich jak szybkość, bezpieczeństwo i ogólna wydajność aplikacji.

Dowiedz się, czym są akcje serwera i jak korzystać z tej nowej funkcji w aplikacji Next.js.

Czym są akcje serwera?

Akcje serwera umożliwiają pisanie jednorazowych funkcji po stronie serwera bezpośrednio obok komponentów serwera. Jest to ogromne, ponieważ nie trzeba już pisać tras API podczas przesyłania formularzy lub wykonywania innego rodzaju mutacji danych, w tym Mutacje danych GraphQL.

Możesz mieć funkcje, które działają na twoim serwerze, a następnie możesz je wywoływać z komponentów klienta lub serwera. Jest to funkcja alfa w Next.js 13.4 i jest zbudowana na React Actions. Korzystanie z akcji serwera prowadzi do zmniejszenia liczby skryptów JavaScript po stronie klienta i może pomóc w tworzeniu stopniowo ulepszanych formularzy.

Przykład akcji serwera

Dzięki akcjom serwera możesz wykonywać mutacje wewnątrz Next.js na serwerze. Przyjrzyj się tej nowej funkcji na przykładowej stronie Next.js, która renderuje formularz umożliwiający utworzenie posta.

Oto import:

import Połączyć z„następny/link”
import Grupa formularzy z"@/komponenty/Grupa formularzy"
import {revaldateTag} z„następny/pamięć podręczna”
import { przekierowanie } z„następny/nawigacja”

Teraz kod do utworzenia posta. Ta funkcja jest akcją serwera; działa na serwerze i wysyła tytuł i treść postu do API (które tworzy post w bazie danych):

asynchronicznyfunkcjonowaćutwórzPost(dane) {
„użyj serwera”
konst tytuł = dane.pobierz("tytuł")
konst treść = dane.pobierz("ciało")
czekać na aportować(" http://127.0.0.1/posts", {
 nagłówek: {"Typ zawartości": "aplikacja/json"},
 metoda: POST,
 ciało: JSON.stringify({tytuł, treść})
 })
 rewalidacjaTag("posty")
 przeadresować("/")
}

Ta funkcja pobiera tytuł posta i treść, które następnie wysyła do /posts punktu końcowego za pośrednictwem żądania POST. Następnie zmusza pamięć podręczną do odświeżenia treści powiązanej z tagiem „posts” i przekierowuje z powrotem na stronę główną.

Oto formularz do zbierania tytułu i treści nowego wpisu:

eksportdomyślny NewPostForm() {
powrót (





"tytuł">Tytuł</label>
"tekst" imię="tytuł" identyfikator="tytuł" />
 </FormGroup>
 </div>




"tytuł">Ciało</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>pole tekstowe</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Zapisz <<span>/button></span><br> <<zakres>/div><br> <<rozpi>/form><br> )<br>}<br>  <p>Możesz zauważyć, że formularz nie zawiera logiki związanej z tworzeniem posta, a jedynie akcję formularza: funkcję <strong>createPost()</strong>. Przypomnijmy, że funkcja createPost ma dyrektywę „use server”, która deklaruje, że wszystko w tym powinna działać na serwerze.</p> <p>Cały kod działa na serwerze, a twój klient nic nie wie o tym. Wynika to z faktu, że formularz jest komponentem serwera i nic nie jest renderowane dynamicznie na klienta.</p> <p>Kiedy klikniesz przycisk <strong>Zapisz</strong>, Next.js wywoła <strong>createPost()</strong> funkcjonować. Spowoduje to wysłanie tytułu i treści jako danych formularza, które zostaną przesłane do lokalnego interfejsu API w celu zapisania informacji.</p> <h2 id="revalidating-the-post"> Ponowna walidacja posta </h2> <p>Na dole funkcji <strong>createPost()</strong> znajduje się następujący wiersz kodu:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /kod> </code></pre> <p>Aby zrozumieć, co robi ta funkcja, wyobraź sobie, że masz stronę z wpisami. Wewnątrz komponentu postów wywołałbyś funkcję o nazwie <strong>getPosts()</strong>, aby pobrać wszystkie posty z bazy danych i wyświetlić je użytkownikowi:</p> <pre> <code><span>eksportuj</span> <span>domyślnie</span> <span>asynchronicznie</span> <span><span>funkcja</span> <span>Posty</span>() span>{<br> <span>const</span> posty = <span>oczekiwanie</span> getPosts()</span></code><p><code> <span>powrót</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>Funkcja <strong>getPosts()</strong> wyglądałaby tak:</p> <pre> <code><span>async</span> <span><span>funkcja</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>oczekiwanie</span> pobierz(<rozpi>" https://127.0.0.1/posts? sort=title", {<br> dalej: {<span>tagi</span>: [<span>"posty"</span>], <span>popraw ponownie</span>: <span>3600</span> }<br> })</rozpi></code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Ta funkcja przekazuje opcję <strong>next</strong> do pobrania, umożliwiając ustawienie okresu ponownej weryfikacji. Domyślnie każde żądanie pobrania wysyłane w komponencie serwera jest przechowywane w pamięci podręcznej na zawsze. Śledzenie pamięci podręcznej i odświeżanie jej w razie potrzeby jest ważną częścią pobierania danych <span> Next.js</span>.</p> <p>Powyższy kod nakazuje Next.js buforowanie danych <strong>postów</strong> przez maksymalnie jedną godzinę (3600 sekund). Po godzinie dane stają się nieaktualne i Next.js odświeża je, aby pobrać najnowsze dane z bazy danych.</p> <p>Pamiętaj, że funkcja <strong>createPost()</strong> wywołuje <strong>revalidateTag("posts")</strong> po zakończeniu reszty swojej pracy. Zmusza to Next.js do ponownego pobrania tych danych, które powinny zawierać nowy post, który właśnie utworzyła aplikacja.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Dowód, że Twój kod działa na serwerze </h2> <p>Aby mieć pewność, że cały kod działa na serwerze, możesz dodać następującą instrukcję dziennika konsoli w pliku Funkcja <strong>createPost()</strong>:</p> <pre> <code><span>console</span>.log(<span>"Działa na serwerze"</span>)</code> </pre> <p>Następnie spróbuj utworzyć nowy post, klikając przycisk przesyłania. Jeśli twój kod działa na serwerze, ten komunikat dziennika pojawi się na twoim terminalu. Ale jeśli działa na kliencie, dziennik pojawi się w konsoli przeglądarki.</p> <p>Dzięki temu można bezpiecznie umieszczać poufne informacje, takie jak zmienne środowiskowe, połączenia z bazą danych i hasła na serwerze, bez obawy, że zostaną one wystawione na działanie klient. Następnie możesz <span>odczytać ciągi znaków z pliku .env</span> w swojej aplikacji Next.js.</p> <p>Możesz chcą zarezerwować użycie akcji serwera dla wersji Next.js późniejszych niż 13.4, zwłaszcza w produkcja. Ale nadal ekscytujące jest obserwowanie, dokąd zmierza ta funkcja, ponieważ nieustannie przesuwa to, co możesz zrobić, przenosząc coraz więcej rzeczy na serwer. Powinno to ułatwić pisanie aplikacji klienckich, a proces ich tworzenia uczynić przyjemniejszym.</p> <h2 id="learn-more-about-migrating-to-next-js"> Dowiedz się więcej o migracji do Next .js </h2> <p>Wielu programistów front-end używa React do tworzenia interfejsów użytkownika. Ale dzięki takim funkcjom, jak renderowanie po stronie serwera i generowanie statycznych witryn, wielu z tych programistów przenosi swoje aplikacje do Next.js. Ta migracja jest bardzo prosta, ponieważ React jest bardzo podobny pod względem składni do Next.js.</p> <p>Dodatkowy wzrost wydajności i bezpieczeństwa jeszcze bardziej wymaga migracji. Możliwość posiadania komponentów po stronie serwera, w połączeniu z nowymi działaniami serwera, które właśnie omówiliśmy, sprawia, że ​​Next.js jest bezpieczniejszą i wydajniejszą opcją w porównaniu do zwykłego Reacta. Jako programista React powinieneś dowiedzieć się, jak przenieść swoją aplikację do Next.js.</p> </div></code></p></pre></rozpi></zakres></button>
</div></code></p></span>