Recupero dei dati e tipizzazione delle action
Recuperi dati sul server con JSON tipizzato, controlli caching/revalidation e crei Server Actions tipizzate per form e mutazioni.
Recupero dei dati e tipizzazione delle action è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 3 lezioni in totale.
Introduzione
Obiettivo: recuperare dati nei componenti server con JSON tipizzato, configurare cache/revalidate e creare Server Actions tipizzate per le mutazioni.
- Helper fetch tipizzati
- Cache: revalidate rispetto a no-store
- Server Actions con i form
Helper fetch tipizzato
Crei un piccolo helper json<T> per decodificare le risposte e generare un errore per le risposte diverse da 200. Usi revalidate per una cache simile a 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>
)
}Controlli della cache
Usi cache: "no-store" per le richieste completamente dinamiche oppure next.revalidate per rigenerare dopo N secondi.
// 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 } })Modulo Server Action
Aggiunga "use server" nel modulo (oppure all'interno della funzione). Le Server Actions vengono eseguite sul server e possono chiamare API riservate al server, quindi 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 }
}Form client che usa un'action
Colleghi la Server Action alla proprietà action di un form. Usi useTransition per mostrare l'interfaccia durante l'attesa. I tipi vengono ricavati dalla firma dell'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>
)
}Suggerimenti e sicurezza
Suggerimenti:
- Preferisca il recupero lato server per i segreti e passi i risultati come props.
- Generi Errors tipizzati dalle action e li gestisca nell'interfaccia con gli error boundary.
- Esegua nuovamente la validazione dei percorsi interessati dopo le mutazioni.
Verifica della tipizzazione delle Server Actions
Verifica rapida: come si contrassegna una funzione come Server Action mantenendo la tipizzazione?
Riepilogo
Riepilogo: decodifichi il JSON con un helper tipizzato, scelga con attenzione no-store o revalidate e usi Server Actions tipizzate per eseguire mutazioni e rivalidare in sicurezza.
Domande Frequenti
La lezione «Recupero dei dati e tipizzazione delle action» è gratuita?
Sì — il testo completo di «Recupero dei dati e tipizzazione delle action» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 3 lezioni in totale.
Cosa imparerò in «Recupero dei dati e tipizzazione delle action»?
Recuperi dati sul server con JSON tipizzato, controlli caching/revalidation e crei Server Actions tipizzate per form e mutazioni. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Recupero dei dati e tipizzazione delle action»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tipi dei gestori App Router; componenti server e client
- Recupero dei dati e tipizzazione delle action
- Tipizzazione delle variabili d’ambiente e configurazione