Как использовать действие сервера в Next.js
Разгрузить рабочую нагрузку от клиента к серверу легко с помощью серверных действий Next.js. Вот все, что вам нужно знать о действиях сервера в Next.js.
Что такое действие сервера?
Серверные действия или серверные действия позволяют вам писать одноразовые серверные функции прямо рядом с вашими серверными компонентами. Это важно, потому что вам больше не нужно писать маршруты API при отправке форм или внесении любых других изменений данных, включая изменения данных GraphQL.
Вы можете написать функции, которые запускаются на сервере, а затем вызывать их из клиентских или серверных компонентов. Это альфа-функция в Next.js 13.4, созданная поверх React Actions. Использование действия сервера приводит к уменьшению количества JavaScript на стороне клиента и может помочь вам постепенно создавать расширенные формы.
Пример действия сервера
С помощью действия сервера вы можете вносить изменения внутри Next.js на сервере. Давайте рассмотрим эту новую функцию на примере страницы, созданной с помощью Next.js, которая показывает форму, позволяющую создавать сообщения.
Это импорт:
импортировать ссылку из “далее/ссылка” импортировать FormGroup из “@/components/FormGroup” импортировать { revalidateTag } из “следующий/кеш” импортировать { перенаправить} из “следующий/навигация”
Теперь с кодом для создания статьи. Эта функция является действием сервера. Он запускается на сервере и отправляет заголовок и тело сообщения в API (генерирует сообщение в базе данных):
асинхронная функция createPost(data) { “использовать сервер” const title = data.get(“title”) const body = data.get(“body”) await fetch(” {header: {“Content-Type”: “application/ json”}, метод: POST, тело: JSON.stringify({title, body}) }) revalidateTag(“posts”) redirect(” }
Эта функция берет заголовок и тело сообщения, а затем отправляет их в конечную точку /posts через запрос POST. Затем он заставляет кэш обновить содержимое, связанное с тегом «posts», и перенаправляет обратно на домашнюю страницу.
Вот новый заголовок сообщения и форма сбора контента:
экспорт по умолчанию NewPostForm() { return ( Тело заголовка
Сохранять
) }
Bạn có thể thấy rằng biểu mẫu khong chứa logic liên quan đến việc tạo bài đang, chỉ la một hanh động biểu mẫu: ham createPost (). Nhớ lại rằng ham createPost có Chỉ thị “sử dụng máy chủ” tuyên bố rằng mọi thứ trong ham đó sẽ chạy trên máy chủ.
Tất cả code đang chạy trên server và client của bạn khong biet gì về nó. Điều này là do biểu mẫu la một thành phần máy chủ và khong có gì được hiển thị động trên máy khach.
Khinhấp vào nút Save, Next.js sẽ gọi ham createPost(). Thao tác này gửi tiêu đề và nội dung dưới dạng dữ liệu biểu mẫu. Nó sẽ được đăng lên API cục bộ để lưu стринги олова.
Xac thực lại bài đăng
Ở phía dưới cùng của ham createPost() là dòng code sau:
revalidateTags(“сообщения”)
Để hiểu ý nghĩa của ham, hay tưởng tượng rằng bạn có một trang bài đăng. Bên trong thành phần bài đang, bạn sẽ gọi một ham có tên getPosts() để lấy tất cả cac bài đang từ cơ sở dữ liu và hiển thị chúng cho người dùng xem:
экспортировать асинхронную функцию по умолчанию Posts(){ const posts = await getPosts() return ( ) }
Hàm getPosts() trông như sau:
async function getPosts() { const res = await fetch(” { next: {tags: (“posts”), revalidate: 3600 } }) return res.json() }
Hàm này chuyển tùy chọn next để tìm nạp, cho phép bạn đặt khoảng thời gian xac thực lại. Theo mặc định, mọi yêu cầu tìm nạp đơn lẻ mà bạn thực hiện ben trong thành phần máy chủ sẽ được lưu vào bộ nhớ đệm vĩnh viễn. Theo dõi bộ đệm và lam mới nó khi cần thiết la một phần quan trọng của qua trình tìm nạp dữ liu trong Next.js.
Đoạn mã trên yêu cầu Next.js lưu trữ dữ liệu post trong tối đa một giờ (3.600 дней). Sau một giờ, dữ liệu đó trở nên cũ và Next.js «обновить» lại nó để lấy dữ liệu mới nhất từ cơ sở dữ liệu.
Hãy Nhớ rằng Ham createPost() gọi revalidateTag(“posts”) sau khi nó hoàn thành phần cong việc con lại. Điều này buộc Next.js phải tìm nạp lại dữ liữ bao gồm bài đang mới mà ứng dụng vừa tạo.
Để chắc chắn toàn bộ code đang chạy trên server, bạn có thể them lệnh log console sau trong ham createPost():
console.log(“Выполняется на сервере”)
Sau đó, hay thử tửo một bài đang mới bằng cách nhấp vào nút gửi. Код Nếu của bạn đang chạy trên máy chủ, thong báo log đó sẽ hiển thị trên thiết bị đầu cuối của bạn. Nhưng nếu nó đang chạy trên máy khach thì nhật ký sẽ hiển thị trong bảng điều khiển của trình duyệt.
Тренируйтесь выполнять действия сервера, используя Next.JS. Привет vọng bài viết hữu ich với cac bạn.
