Loader

Loader

Loaders fetch data for your route. They run on both the server during SSR and on the client during navigation. Use isBrowser() for browser-only APIs like localStorage.

Server vs Client Loaders

  • Default: Loaders in .tsx files run on both server and client
  • Server-only: Create a separate .ts file for loaders that need server-only resources
  • Browser-only code: Use isBrowser() to guard browser APIs within loaders

Loaded Data

Message
Data loaded successfully!
Timestamp
2026-01-11T20:41:42.515Z
Random Number
408

Example Code

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

export async function loader(args: RouteLoaderArgs) {
  await new Promise(resolve => setTimeout(resolve, 500));
  return {
    timestamp: new Date().toISOString(),
    randomNumber: Math.floor(Math.random() * 1000),
    message: "Data loaded successfully!"
  };
}

Note: Refresh the page or navigate away and back to see the loader run again with new data.