Remix loader private-only flag to prevent client serialization

Answer

Remix does not provide a configuration option or decorator to mark a loader as “private‑only” so that its return value is omitted from the client‑side hydration payload.

Confirmed facts

• Every loader return value is serialized with JSON.stringify and sent to the browser via useLoaderData.
• There is no built‑in flag, environment variable, or route convention to opt‑out of this serialization.
• The only reliable way to keep data from reaching the client is to exclude it from the value the loader returns.

Recommended pattern

1. Create a small utility that strips unwanted fields from an object.
2. Wrap each loader (or a base loader) with this utility before returning the result.
3. Optionally, store server‑only data in the request context (e.g., request.context) in middleware and read it inside the loader without returning it.

// utils/stripPrivate.ts
export function stripPrivate<T extends object>(data: T, keys: (keyof T)[]): Omit {
  const copy = { ...data };
  for (const k of keys) {
    delete copy[k];
  }
  return copy as Omit;
}

// app/routes/example.tsx
import type { LoaderFunction } from '@remix-run/node';
import { stripPrivate } from '~/utils/stripPrivate';

export const loader: LoaderFunction = async ({ request }) => {
  const raw = await fetchServerData(); // { secret: 'token', public: 'info' }
  return stripPrivate(raw, ['secret']);
};

Alternative: request context

If you prefer not to return the data at all, attach it to request.context in middleware:

// app/middleware.ts
export async function middleware(request: Request, next: () => Promise) {
  request.context = { ...request.context, secretToken: await getToken() };
  return next();
}

Then read it inside the loader without returning it:

export const loader: LoaderFunction = async ({ request }) => {
  const secret = (request.context as any).secretToken; // server‑only
  const publicData = await fetchPublicInfo();
  return { publicData };
};