How to Use Headers in Loader in Remix for Custom Responses

In Remix, you can set HTTP headers in a loader by returning a Response object with a headers option. Use the new Headers() constructor to define headers like Cache-Control or Content-Type and return them along with your data.

Syntax

In Remix, a loader function returns data for your route. To add headers, return a Response object instead of plain data. The Response constructor accepts the body and an options object where you can set headers.

• body: The content you want to send, usually JSON stringified.
• headers: An instance of Headers or an object with header key-value pairs.

javascript

export async function loader() {
  const data = { message: "Hello from loader" };
  return new Response(JSON.stringify(data), {
    headers: new Headers({
      "Content-Type": "application/json",
      "Cache-Control": "max-age=3600"
    })
  });
}

Example

This example shows a Remix loader that returns JSON data with custom headers for content type and caching. The browser or client will receive these headers along with the data.

javascript

import { json } from "@remix-run/node";

export async function loader() {
  const data = { greeting: "Hi there!" };
  return json(data, {
    headers: {
      "Cache-Control": "public, max-age=600",
      "X-Custom-Header": "MyHeaderValue"
    }
  });
}

Output

HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: public, max-age=600
X-Custom-Header: MyHeaderValue

{"greeting":"Hi there!"}

Common Pitfalls

One common mistake is returning plain objects instead of a Response or using Remix's json() helper without headers. Another is setting headers incorrectly as a plain object without using Headers or the json() helper's options.

Also, avoid setting conflicting headers like multiple Cache-Control values.

javascript

/* Wrong way: returning plain object without headers */
export async function loader() {
  return { message: "No headers here" };
}

/* Right way: using json() helper with headers */
import { json } from "@remix-run/node";
export async function loader() {
  return json({ message: "With headers" }, {
    headers: { "Cache-Control": "max-age=300" }
  });
}

Quick Reference

Concept	Usage	Notes
Return type	Return Response or use json() helper	Allows setting headers
Headers format	Use Headers instance or plain object	Both accepted by Remix
Common headers	Content-Type, Cache-Control, custom headers	Control caching and metadata
Setting cache	Cache-Control: max-age=seconds	Controls browser caching
Avoid	Returning plain objects without headers	Headers won't be sent

Key Takeaways

Use Remix's json() helper or return a Response to set headers in loaders.

Headers must be passed as an object or Headers instance in the response options.

Common headers include Content-Type and Cache-Control for caching control.

Returning plain objects without wrapping them prevents headers from being sent.

Avoid conflicting or duplicate headers to ensure correct client behavior.