Использование новой функции Server Actions в Next.js для реализации stateless сессии на основе cookies и получения преимуществ от Server Actions.
Следуя за долгожданным релизом App Router, Next.js представил еще одну новинку — Server Actions. Эта инновация облегчает манипуляции с данными на сервере, уменьшает зависимость от JavaScript на стороне клиента и постепенно улучшает формы — все это с использованием JavaScript и React для создания мощных веб-приложений без необходимости в традиционных REST API.
В этой статье мы рассмотрим преимущества этого новшества и увидим его в действии, реализуя stateless сессию на основе cookies для Next.js. Этот материал служит пошаговым руководством, которое проведет тебя через все этапы создания демонстрационного проекта с использованием App Router.
Наш практический пример можно легко развернуть на Vercel с использованием Edge Runtime. Полный исходный код можно загрузить с GitHub.
Традиционно, если мы хотим создать веб-приложение на Next.js, которое выполняет запросы к базе данных на сервере, нам может понадобиться создать несколько REST API для проверки состояния авторизации и запросов к базе данных, затем фронтенд-приложение на React будет вызывать эти API. Но если нет необходимости открывать API для публичного доступа, а это React-приложение является единственным клиентом, использование REST API выглядит излишним, так как они будут вызываться только нами.
С Server Actions, компонент React теперь может выполнять код на серверной стороне. Вместо того чтобы вручную создавать конечную точку API, Server Actions автоматически создают конечную точку, которую Next.js использует в фоновом режиме. При вызове Server Action, Next.js отправляет запрос POST на страницу, на которой ты находишься, с метаданными о том, какое действие должно быть выполнено.
Как предпочтительная платформа для создания stateless приложений, Next.js часто подразумевает серверлесс, где мы не можем использовать память для хранения данных сессии. Традиционные сессии требуют использования внешних хранилищ, таких как Redis или база данных.
Однако, когда данные сессии остаются достаточно малыми, у нас есть альтернативный путь: создание stateless сессии с использованием методов безопасного шифрования и cookies, хранящихся на стороне клиента. Этот метод исключает необходимость во внешних хранилищах и сохраняет данные сессии децентрализованными, что приносит значительное облегчение нагрузке на сервер и общее улучшение производительности приложения.
Таким образом, наша цель — создать легковесную, эффективную stateless сессию, которая использует возможности клиентского хранилища, обеспечивая при этом безопасность за счет правильно организованного шифрования.
Для начала нужно внедрить новый проект:
Для подробной информации о процессе установки, обратись к официальному руководству.
Чтобы легче было понять Server Actions, сначала создадим упрощенную версию сессии. В этой версии мы будем использовать JSON для хранения данных сессии в cookies.
Создай файл под названием session/index.ts и добавь в него следующий код:
Первая строка "use server" отмечает функции этого файла как Server Actions.
Поскольку у нас нет прямого доступа к request и response, мы используем next/headers для чтения и записи cookies. Это доступно только в Server Actions.
После создания библиотеки сессий, пришло время реализовать функции входа и выхода, чтобы продемонстрировать удобство использования сессии.
Внедри следующий код в user/index.ts:
Здесь мы используем 'фиктивный' процесс входа, который требует ввода имени пользователя.
В App Router, страница обычно является асинхронным компонентом, и Server Actions не могут быть вызваны напрямую из такого компонента. Необходимо создать компоненты с использованием `"use client"``:
components/sign-in.tsx
components/sign-out.tsx
И наконец, давай создадим наш app/page.tsx
Работа с Server Actions завершена. Теперь последний этап включает внедрение шифрования, которое можно реализовать с помощью crypto.
Теперь модифицируй библиотеку сессий для внедрения следующего:
Поздравляем! Ты успешно реализовал stateless сессию для Next.js. Вот онлайн предпросмотр на Vercel, а также ты можешь скачать полный исходный код здесь. Надеемся, что это руководство поможет тебе лучше понять новую функцию Server Actions.
Далее мы рассмотрим, как использовать Server Actions для интеграции Logto в Next.js. Оставайся с нами!