Как да използвате 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("заглавие")
конст тяло = data.get("тяло")
изчакайте извличане (" http://127.0.0.1/posts", {
 заглавка: {"Тип съдържание": "приложение/json"},
 метод: POST,
 тяло: JSON.stringify({заглавие, тяло})
 })
 revalidateTag("постове")
 пренасочване("/")
}

Тази функция получава заглавието и тялото на публикацията, които след това изпраща на /posts крайна точка чрез POST заявка. След това принуждава кеша да опресни съдържанието, свързано с маркера „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></pre> <p>За да разберете какво прави тази функция, представете си, че имате страница с публикации. Вътре в компонента за публикации ще извикате функция с име <strong>getPosts()</strong>, за да получите всички публикации от вашата база данни и да ги изобразите, за да ги види потребителят:</p> <pre> <code><span>export</span> <span>по подразбиране</span> <span>async</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>async</span> <span><span>функция</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>чакам</span> извличане (<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> next: {<span>tags</span>: [<span>"posts"</span>], <span>revalidation</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> до един час (3600 секунди). След един час данните стават остарели и 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>console</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"> Научете повече за мигрирането към Next .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>