"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "введение", "hProperties": { "id": "введение" } }, "depth": 2, "value": "Введение" }, { "data": { "id": "уход-от-rest-api", "hProperties": { "id": "уход-от-rest-api" } }, "depth": 2, "value": "Уход от REST API" }, { "data": { "id": "необходимость-в-stateless-session", "hProperties": { "id": "необходимость-в-stateless-session" } }, "depth": 2, "value": "Необходимость в Stateless Session" }, { "data": { "id": "основная-реализация-сессии", "hProperties": { "id": "основная-реализация-сессии" } }, "depth": 2, "value": "Основная реализация сессии" }, { "data": { "id": "создание-библиотеки-сессий", "hProperties": { "id": "создание-библиотеки-сессий" } }, "depth": 3, "value": "Создание библиотеки сессий" }, { "data": { "id": "внедрение-еще-две-server-actions", "hProperties": { "id": "внедрение-еще-две-server-actions" } }, "depth": 3, "value": "Внедрение: еще две Server Actions" }, { "data": { "id": "создание-страницы", "hProperties": { "id": "создание-страницы" } }, "depth": 2, "value": "Создание страницы" }, { "data": { "id": "внедрение-шифрования", "hProperties": { "id": "внедрение-шифрования" } }, "depth": 2, "value": "Внедрение шифрования" }, { "data": { "id": "заключение", "hProperties": { "id": "заключение" } }, "depth": 2, "value": "Заключение" }]; const readingTime = { "minutes": 2, "words": 488, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "введение", children: ["Введение", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#введение", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Следуя за долгожданным релизом ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), ", Next.js представил еще одну новинку — ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), ". Эта инновация облегчает манипуляции с данными на сервере, уменьшает зависимость от JavaScript на стороне клиента и постепенно улучшает формы — все это с использованием JavaScript и React для создания мощных веб-приложений без необходимости в традиционных REST API."] }), "\n", _jsx(_components.p, { children: "В этой статье мы рассмотрим преимущества этого новшества и увидим его в действии, реализуя stateless сессию на основе cookies для Next.js. Этот материал служит пошаговым руководством, которое проведет тебя через все этапы создания демонстрационного проекта с использованием App Router." }), "\n", _jsxs(_components.p, { children: ["Наш практический пример можно легко развернуть на Vercel с использованием ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), ". Полный исходный код можно загрузить с ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "уход-от-rest-api", children: ["Уход от REST API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#уход-от-rest-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Традиционно, если мы хотим создать веб-приложение на Next.js, которое выполняет запросы к базе данных на сервере, нам может понадобиться создать несколько REST API для проверки состояния авторизации и запросов к базе данных, затем фронтенд-приложение на React будет вызывать эти API. Но если нет необходимости открывать API для публичного доступа, а это React-приложение является единственным клиентом, использование REST API выглядит излишним, так как они будут вызываться только нами." }), "\n", _jsxs(_components.p, { children: ["С Server Actions, компонент React теперь может выполнять код на серверной стороне. Вместо того чтобы вручную создавать конечную точку API, Server Actions автоматически создают конечную точку, которую Next.js использует в фоновом режиме. При вызове Server Action, Next.js отправляет запрос ", _jsx(_components.code, { children: "POST" }), " на страницу, на которой ты находишься, с метаданными о том, какое действие должно быть выполнено."] }), "\n", _jsxs(_components.h2, { id: "необходимость-в-stateless-session", children: ["Необходимость в Stateless Session", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#необходимость-в-stateless-session", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Как предпочтительная платформа для создания stateless приложений, Next.js часто подразумевает серверлесс, где мы не можем использовать память для хранения данных сессии. Традиционные сессии требуют использования внешних хранилищ, таких как Redis или база данных." }), "\n", _jsx(_components.p, { children: "Однако, когда данные сессии остаются достаточно малыми, у нас есть альтернативный путь: создание stateless сессии с использованием методов безопасного шифрования и cookies, хранящихся на стороне клиента. Этот метод исключает необходимость во внешних хранилищах и сохраняет данные сессии децентрализованными, что приносит значительное облегчение нагрузке на сервер и общее улучшение производительности приложения." }), "\n", _jsx(_components.p, { children: "Таким образом, наша цель — создать легковесную, эффективную stateless сессию, которая использует возможности клиентского хранилища, обеспечивая при этом безопасность за счет правильно организованного шифрования." }), "\n", _jsxs(_components.h2, { id: "основная-реализация-сессии", children: ["Основная реализация сессии", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#основная-реализация-сессии", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Для начала нужно внедрить новый проект:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "npx create-next-app@latest\n" }) }), "\n", _jsxs(_components.p, { children: ["Для подробной информации о процессе установки, обратись к ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "официальному руководству" }), "."] }), "\n", _jsxs(_components.h3, { id: "создание-библиотеки-сессий", children: ["Создание библиотеки сессий", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#создание-библиотеки-сессий", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Чтобы легче было понять Server Actions, сначала создадим упрощенную версию сессии. В этой версии мы будем использовать JSON для хранения данных сессии в cookies." }), "\n", _jsxs(_components.p, { children: ["Создай файл под названием ", _jsx(_components.code, { children: "session/index.ts" }), " и добавь в него следующий код:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { cookies } from 'next/headers';\n\nexport type Session = {\n username: string;\n};\n\nexport const getSession = async (): Promise => {\n const cookieStore = cookies();\n const session = cookieStore.get('session');\n\n if (session?.value) {\n return JSON.parse(session.value) as Session;\n }\n\n return null;\n};\n\nexport const setSession = async (session: Session) => {\n const cookieStore = cookies();\n cookieStore.set('session', JSON.stringify(session));\n};\n\nexport const removeSession = async () => {\n const cookieStore = cookies();\n cookieStore.delete('session');\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Первая строка ", _jsx(_components.code, { children: "\"use server\"" }), " отмечает функции этого файла как Server Actions."] }), "\n", _jsxs(_components.p, { children: ["Поскольку у нас нет прямого доступа к ", _jsx(_components.code, { children: "request" }), " и ", _jsx(_components.code, { children: "response" }), ", мы используем ", _jsx(_components.code, { children: "next/headers" }), " для чтения и записи cookies. Это доступно только в Server Actions."] }), "\n", _jsxs(_components.h3, { id: "внедрение-еще-две-server-actions", children: ["Внедрение: еще две Server Actions", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#внедрение-еще-две-server-actions", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "После создания библиотеки сессий, пришло время реализовать функции входа и выхода, чтобы продемонстрировать удобство использования сессии." }), "\n", _jsxs(_components.p, { children: ["Внедри следующий код в ", _jsx(_components.code, { children: "user/index.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { removeSession, setSession } from '@/session';\n\nexport const signIn = async (username: string) => {\n await setSession({ username });\n};\n\nexport const signOut = async () => {\n await removeSession();\n};\n" }) }), "\n", _jsx(_components.p, { children: "Здесь мы используем 'фиктивный' процесс входа, который требует ввода имени пользователя." }), "\n", _jsxs(_components.h2, { id: "создание-страницы", children: ["Создание страницы", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#создание-страницы", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "В App Router, страница обычно является асинхронным компонентом, и Server Actions не могут быть вызваны напрямую из такого компонента. Необходимо создать компоненты с использованием `\"use client\"``:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "components/sign-in.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { signIn } from '@/user';\nimport { useState } from 'react';\n\nconst SignIn = () => {\n const [username, setUsername] = useState('');\n\n return (\n

\n {\n setUsername(event.target.value);\n }}\n />\n {\n signIn(username);\n }}\n >\n Sign In\n \n

\n );\n};\n\nexport default SignIn;\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "components/sign-out.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { signOut } from '@/user';\n\nconst SignOut = () => {\n return (\n {\n signOut();\n }}\n >\n Sign Out\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["И наконец, давай создадим наш ", _jsx(_components.code, { children: "app/page.tsx" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getSession } from '@/session';\nimport styles from './page.module.css';\nimport SignIn from '../components/sign-in';\nimport SignOut from '@/components/sign-out';\n\nexport default async function Home() {\n const session = await getSession();\n\n return (\n

\n {session ? (\n

Ты вошел как {session.username}

\n \n

\n ) : (\n \n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "внедрение-шифрования", children: ["Внедрение шифрования", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#внедрение-шифрования", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Работа с Server Actions завершена. Теперь последний этап включает внедрение шифрования, которое можно реализовать с помощью ", _jsx(_components.code, { children: "crypto" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// session/encrypt.ts\nimport { createCipheriv, createDecipheriv } from 'crypto';\n\n// Замени своим ключом и iv\n// Ты можешь сгенерировать их с помощью crypto.randomBytes(32) и crypto.randomBytes(16)\nconst key = Buffer.from('17204a84b538359abe8ba74807efa12a068c20a7c7f224b35198acf832cea57b', 'hex');\nconst iv = Buffer.from('da1cdcd9fe4199c835bd5f1d56446aff', 'hex');\nconst algorithm = 'aes-256-cbc';\n\nexport const encrypt = (text: string) => {\n const cipher = createCipheriv(algorithm, key, iv);\n const encrypted = cipher.update(text, 'utf8', 'base64');\n return `${encrypted}${cipher.final('base64')}`;\n};\n\nexport const decrypt = (encrypted: string) => {\n const decipher = createDecipheriv(algorithm, key, iv);\n const decrypted = decipher.update(encrypted, 'base64', 'utf8');\n return `${decrypted}${decipher.final('utf8')}`;\n};\n" }) }), "\n", _jsx(_components.p, { children: "Теперь модифицируй библиотеку сессий для внедрения следующего:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { cookies } from 'next/headers';\nimport { decrypt, encrypt } from './encrypt';\n\nexport type Session = {\n username: string;\n};\n\nexport const getSession = async (): Promise => {\n const cookieStore = cookies();\n const session = cookieStore.get('session');\n\n if (session?.value) {\n try {\n const decrypted = decrypt(session.value);\n return JSON.parse(decrypted) as Session;\n } catch {\n // Игнорируем невалидную сессию\n }\n }\n\n return null;\n};\n\nexport const setSession = async (session: Session) => {\n const cookieStore = cookies();\n const encrypted = encrypt(JSON.stringify(session));\n cookieStore.set('session', encrypted);\n};\n\nexport const removeSession = async () => {\n const cookieStore = cookies();\n cookieStore.delete('session');\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "заключение", children: ["Заключение", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#заключение", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Поздравляем! Ты успешно реализовал stateless сессию для Next.js. Вот онлайн ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "предпросмотр" }), " на Vercel, а также ты можешь скачать полный исходный код ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "здесь" }), ". Надеемся, что это руководство поможет тебе лучше понять новую функцию Server Actions."] }), "\n", _jsx(_components.p, { children: "Далее мы рассмотрим, как использовать Server Actions для интеграции Logto в Next.js. Оставайся с нами!" }), "\n", _jsx(LogtoCloudButton, { children: "Интересует Logto? Попробуй Logto уже сегодня." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }