Framework examples

Representative react-bun-ssr examples for Bun-native React apps.

These examples are compact entry points into the docs. Use them to understand how route files, loaders, actions, streaming, API handlers, and Bun deployment fit together.

Start with Quick Start Review Benchmarks View GitHub

Use cases

Start from a concrete pattern, then open the deeper guide.

Task Tracker starter

Build a small route tree with a page route, shared layout, loader, action, and middleware.

app/routes/tasks.tsx
app/routes/tasks.server.ts
app/routes/_layout.tsx
app/routes/_middleware.server.ts

Open Quick Start

Server loader data

Fetch server-owned data, return deferred values, and hydrate the same route payload on the client.

export const loader: Loader = async () => {
  return defer({
    tasks: await getTasks(),
    activity: getActivity(),
  });
};

Read loader docs

React form action

Use React useActionState with a client action stub and a server companion action.

export const action = createRouteAction<FormState>();

const [state, formAction] = useActionState(action, initialState);

Read action docs

Streaming SSR route

Stream the full document while slower loader keys resolve behind Suspense boundaries.

<Suspense fallback={<p>Loading activity...</p>}>
  <ActivityFeed data={activityPromise} />
</Suspense>

Read streaming docs

API route handler

Return JSON from API routes that share the same route tree and middleware model as pages.

export function GET() {
  return json({ ok: true });
}

Read routing docs

Bun deployment

Build client/server artifacts and start the generated Bun server without a Node adapter layer.

bun run build
bun run start

Read deployment docs

Next step

Validate the shape against the comparison and benchmark pages.

Examples show what the framework feels like in code. Benchmarks and comparisons explain when this smaller Bun-native stack is the right tradeoff.

Compare with Next.js Read benchmarks Open API reference