Cookies
Le loader lit request.headers.get("cookie") ; l'action retourne une Response dont l'en-tête set-cookie est transmis au navigateur. Les chargements suivants voient le cookie.
Astuce
Ce pattern POST/Redirect/GET est essentiel : si l'action retourne un 200, le navigateur navigue vers le corps de la réponse au lieu de recharger la page. Le 303 force un GET propre sous le nouvel état des cookies.
Cookies vus par le serveur
(aucun cookie présent)
Cliquez sur « Définir », puis actualisez — vous devriez voir demo_session dans la liste ci-dessus.
// src/app/examples/cookies/page.tsx (loader + action)
export async function loader({ request }: LoaderArgs) {
const cookies = parseCookies(request.headers.get("cookie") ?? "");
return { cookies };
}
export async function action({ request }: ActionArgs) {
const form = await request.formData();
const op = String(form.get("op") ?? "");
// 303 POST/Redirect/GET — forces the browser to re-fetch under the
// new cookie state. Returning 200 here would navigate to the action
// response body instead of reloading the page.
if (op === "set") {
return new Response(null, {
status: 303,
headers: {
"location": "/examples/cookies",
"set-cookie": "demo_session=abc123; Path=/; Max-Age=300; SameSite=Lax",
},
});
}
if (op === "clear") {
return new Response(null, {
status: 303,
headers: {
"location": "/examples/cookies",
"set-cookie": "demo_session=; Path=/; Max-Age=0; SameSite=Lax",
},
});
}
return { ok: true };
}