Récupération des données et typage des actions
Récupérez des données côté serveur avec du JSON typé, contrôlez la mise en cache et la revalidation, et créez des Server Actions typées pour les formulaires et les mutations.
Récupération des données et typage des actions est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 3 leçons au total.
Introduction
Objectif : récupérer des données dans des composants serveur avec du JSON typé, configurer la mise en cache/revalidation et créer des actions serveur typées pour les modifications.
- Utilitaires de récupération typés
- Mise en cache : revalidation ou absence de stockage
- Actions serveur avec des formulaires
Utilitaire de récupération typé
Créez un petit utilitaire json<T> pour décoder les réponses et lever une exception pour les réponses autres que 200. Utilisez la revalidation pour une mise en cache de type 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>
)
}Contrôles du cache
Utilisez cache: "no-store" pour les requêtes entièrement dynamiques, ou next.revalidate pour régénérer les données après N secondes.
// 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 } })Module d’action serveur
Ajoutez "use server" dans le module (ou à l’intérieur de la fonction). Les actions serveur s’exécutent sur le serveur et peuvent appeler des API réservées au serveur, puis 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 }
}Formulaire client utilisant une action
Associez l’action serveur à l’attribut action d’un formulaire. Utilisez useTransition pour afficher l’interface en attente. Les types se propagent depuis la signature de l’action.
"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>
)
}Conseils et sécurité
Conseils :
- Privilégiez la récupération côté serveur pour les secrets ; transmettez les résultats sous forme de propriétés.
- Levez des erreurs typées depuis les actions ; gérez-les dans l’interface avec des frontières.
- Revalidez les chemins concernés après les modifications.
Vérification du typage des actions serveur
Vérification rapide : comment marquez-vous une fonction comme action serveur tout en conservant les types ?
Récapitulatif
Récapitulatif : décodez le JSON avec un utilitaire typé, choisissez judicieusement no-store ou revalidate et utilisez des actions serveur typées pour effectuer les modifications et revalider les données en toute sécurité.
Questions Fréquemment Posées
La leçon « Récupération des données et typage des actions » est-elle gratuite ?
Oui — le texte complet de « Récupération des données et typage des actions » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Récupération des données et typage des actions » ?
Récupérez des données côté serveur avec du JSON typé, contrôlez la mise en cache et la revalidation, et créez des Server Actions typées pour les formulaires et les mutations. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Récupération des données et typage des actions » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Types du routeur d’application ; composants serveur ou client
- Récupération des données et typage des actions
- Typage de l’environnement et configuration