Получение данных и типизация действий
Получайте данные на сервере с типизированным JSON, управляйте кэшированием и повторной проверкой и создавайте типизированные Server Actions для форм и изменений данных.
«Получение данных и типизация действий» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: получать данные в серверных компонентах с типизированным JSON, настраивать кэширование/ревалидацию и создавать типизированные серверные действия для изменений данных.
- Типизированные вспомогательные функции для получения данных
- Кэш: ревалидация и отсутствие хранения
- Серверные действия с формами
Типизированная вспомогательная функция получения данных
Создайте небольшую вспомогательную функцию json<T> для разбора ответов и выбрасывания ошибки при статусе, отличном от 200. Используйте ревалидацию для кэширования, подобного ISR.
// app/lib/http.ts
export async function json<T>(res: Response): Promise<T> {
if (!res.ok) throw new Error(`HTTP ${res.status}`)
return (await res.json()) as T
}
// app/page.tsx (server)
export type Post = { id: number; title: string }
export default async function Page() {
const res = await fetch("https://example.com/api/posts", { next: { revalidate: 60 } })
const posts = await json<Post[]>(res)
return (
<main style={{ display: "grid", gap: 8 }}>
<h1>Posts</h1>
<ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
</main>
)
}Управление кэшем
Используйте cache: "no-store" для полностью динамических запросов или next.revalidate, чтобы регенерировать данные через N секунд.
// app/page.tsx (server)
export default async function Page() {
const res = await fetch("https://example.com/api/now", { cache: "no-store" })
const data = await res.json() as { now: string }
return <pre>{JSON.stringify(data, null, 2)}</pre>
}
// Alternative: revalidate per request
// fetch(url, { next: { revalidate: 5 } })Модуль серверного действия
Добавьте "use server" в модуль (или внутрь функции). Серверные действия выполняются на сервере, могут вызывать API, доступные только серверу, а затем выполнять revalidatePath.
// app/actions.ts
"use server"
import { revalidatePath } from "next/cache"
export async function createPost(form: FormData): Promise<{ id: string }> {
const title = String(form.get("title") || "")
if (!title) throw new Error("title required")
// pretend DB insert
const id = Math.random().toString(36).slice(2)
revalidatePath("/")
return { id }
}Клиентская форма с действием
Привяжите серверное действие к action формы. Используйте useTransition, чтобы показывать интерфейс ожидания. Типы выводятся из сигнатуры действия.
"use client"
import { useTransition } from "react"
import { createPost } from "../actions"
export default function NewPost() {
const [pending, start] = useTransition()
const onSubmit = async (formData: FormData) => {
await createPost(formData)
}
return (
<form action={(fd) => start(() => onSubmit(fd))} style={{ display: "grid", gap: 8 }}>
<input name="title" placeholder="Title" />
<button disabled={pending}>{pending ? "Creating…" : "Create"}</button>
</form>
)
}Советы и безопасность
Советы:
- Для секретов предпочитайте получение данных на сервере и передавайте результаты как свойства.
- Выбрасывайте из действий типизированные ошибки, а в интерфейсе обрабатывайте их с помощью границ.
- Выполняйте ревалидацию затронутых путей после изменений данных.
Проверка типизации серверного действия
Быстрая проверка: как пометить функцию как серверное действие и сохранить типы?
Повторение
Повторение: разбирайте JSON с помощью типизированной вспомогательной функции, обдуманно выбирайте no-store или revalidate и используйте типизированные серверные действия для безопасного изменения и обновления данных.
Часто задаваемые вопросы
Урок «Получение данных и типизация действий» бесплатный?
Да — полный текст урока «Получение данных и типизация действий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Получение данных и типизация действий»?
Получайте данные на сервере с типизированным JSON, управляйте кэшированием и повторной проверкой и создавайте типизированные Server Actions для форм и изменений данных. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Получение данных и типизация действий»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Типы обработчиков App Router; серверные и клиентские компоненты
- Получение данных и типизация действий
- Типизация окружения и конфигурация