Server Loader: Return Response

Server Loader

Server Loader: Return Response

Server loaders can return a custom Response object for fine-grained control over headers, status codes, and content types. This is useful for setting cache headers, custom response formats, or streaming responses.

When to Use Custom Response

Setting custom cache headers (Cache-Control, ETag, etc.)
Adding security headers or CORS headers
Returning different content types (XML, CSV, etc.)
Streaming large responses
Setting specific HTTP status codes

Response Data

Title: Custom Response Example
Description: Data loaded via a custom Response object
Timestamp: 2026-03-09T09:07:44.754Z

Server Loader with Custom Response (response.ts)

import type { RouteLoaderArgs } from "@udibo/juniper";

import type { ResponseLoaderData } from "./response.tsx";

export function loader(_args: RouteLoaderArgs): Response {
  const data: ResponseLoaderData = {
    title: "Custom Response Example",
    description: "Data loaded via a custom Response object",
    timestamp: new Date().toISOString(),
  };

  const headers = new Headers({
    "Content-Type": "application/json",
    "Cache-Control": "private, max-age=60",
    "X-Custom-Header": "Juniper-Demo",
  });

  return new Response(JSON.stringify(data), { headers });
}

Note: The custom headers set by the server loader are included in the response. Check your browser's developer tools to see the Cache-Control and custom headers.