Как использовать действия сервера Next.js

Версия 13.4 Next.js поставляется со стабильным маршрутизатором приложений и возможностью изменять данные с помощью действий сервера. Эта функция полностью меняет правила игры, поскольку позволяет полностью изменять данные из серверных компонентов. Это дает множество преимуществ в таких областях, как скорость, безопасность и общая производительность приложения.

Узнайте, что такое действия сервера и как использовать эту новую функцию в приложении Next.js.

Что такое действия сервера?

Серверные действия позволяют вам писать одноразовые серверные функции прямо рядом с вашими серверными компонентами. Это огромно, потому что вам больше не нужно писать маршруты API при отправке форм или выполнении любых других изменений данных, включая Мутации данных GraphQL.

У вас могут быть функции, которые выполняются на вашем сервере, а затем вы можете вызывать их из клиентских или серверных компонентов. Это альфа-функция в Next.js 13.4, и она построена поверх React Actions. Использование действий сервера приводит к уменьшению количества JavaScript на стороне клиента и может помочь вам создавать формы с постепенным улучшением.

Пример действий сервера

С помощью действий сервера вы можете выполнять мутации внутри Next.js на сервере. Взгляните на эту новую функцию на примере страницы Next.js, которая отображает форму, позволяющую вам создать сообщение.

Вот импорт:

Импортировать Связь от"далее/ссылка"
Импортировать Группа Форм от"@/компоненты/группа форм"
Импортировать { перепроверить тег } от"следующий/кэш"
Импортировать { перенаправить } от"далее/навигация"

Теперь код для создания сообщения. Эта функция является действием сервера; он запускается на сервере и отправляет заголовок и тело сообщения в API (который создает сообщение в базе данных):

асинхронныйфункциясоздать сообщение(данные) {
"использовать сервер"
константа название = данные.получить("заголовок")
константа тело = данные.получить("тело")
Ждите принести(" http://127.0.0.1/posts", {
 заголовок: {"Тип содержимого": "приложение/json"},
 метод: ПОСТ,
 тело: JSON.stringify({название, тело})
 })
 перепроверитьтег("сообщения")
 перенаправить("/")
}

Эта функция получает заголовок и тело сообщения, которое затем отправляет в /posts конечная точка через POST-запрос. Затем он заставляет кэш обновлять содержимое, связанное с тегом «posts», и перенаправляет обратно на домашнюю страницу.

Вот форма для сбора нового заголовка и тела сообщения:

экспортпо умолчанию НоваяПостФорма() {
возвращаться (





"заголовок">Название</label>
"текст" имя="заголовок" идентификатор ="заголовок" />
 </FormGroup>
 </div>




"заголовок">Тело</label>
"текст" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>текстовое поле</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>Весь код выполняется на сервере, и ваш клиент ничего не знает об этом. Это связано с тем, что форма является серверным компонентом, и нет ничего, что динамически отображалось бы на client.</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>экспорт</span> <span>по умолчанию</span> <span>асинхронный</span> <span><span>функция</span> <span>Сообщения</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> })}<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>await</span> выборка(" https://127.0.0.1/posts? sort=title", {<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>Эта функция передает параметр <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-working-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>