GuideRendering
Edit this page

Rendering

HTML Head Metadata for React SSR Routes

Set route titles, meta descriptions, Open Graph tags, and head output in react-bun-ssr so SEO, hydration, and transitions stay aligned.

seoheadmetatitle

Each route can contribute document metadata. The framework renders it on the server and reconciles the managed head region during soft transitions.

Minimal working example

export function head() {
  return <title>Task Tracker | Open Tasks</title>;
}

export function meta() {
  return {
    description: "Track open work with Bun-native SSR and soft transitions.",
    "og:title": "Task Tracker | Open Tasks",
    "og:type": "website",
    keywords: "tasks,react,bun,ssr",
  };
}

Why this matters

Accessible client transitions rely on unique route titles. Search engines and social previews do too.

Rules

  • <title> should resolve to a single string value.
  • Keep metadata deterministic between server render and hydration.
  • Prefer route-specific titles over generic app-wide titles.

Next step

Move into CSS Modules to style the app without a global CSS dump.