Selective Loading

Request /tr/pricing
       ↓
__root.tsx beforeLoad
       ↓ detect locale (cookie / geo / default)
__root.tsx loader
       ↓ resolve page → namespaces: ["common", "nav", "pricing"]
       ↓ getMessages("tr", { namespaces })
       ↓ CDN batch.json?ns=common,nav,pricing  (single request)
       ↓ returns { common:{..}, nav:{..}, pricing:{..} }
       ↓ store in ssrMessagesByRequest map
component render
       ↓ BetterI18nProvider messages={messages}
       ↓ SSR HTML includes <script id="__i18n_messages__">
Client hydration
       ↓ reads #__i18n_messages__ synchronously (no loading flash)
Client navigation
       ↓ loader re-runs with new page's namespaces
       ↓ shared namespaces (common, nav) hit SDK cache — 0 CDN requests

/**
 * URL path (without locale prefix) → namespaces to preload.
 * Every entry is an exact match. Falls back to PAGE_DEFAULTS when no match.
 */
export const PAGE_NAMESPACES: Record<string, readonly string[]> = {
  "": ["common", "navigation", "footer", "hero", "features"],
  "pricing": ["common", "navigation", "footer", "pricing"],
  "blog": ["common", "navigation", "footer", "blog"],
  "changelog": ["common", "navigation", "footer", "changelog"],
  // ...one entry per route
};

const PAGE_DEFAULTS = ["common", "navigation", "footer"];

/**
 * Extract the path segment that matters for namespace resolution.
 * Strips locale prefix and leading/trailing slashes.
 */
export function extractPagePath(pathname: string): string {
  const segments = pathname.split("/").filter(Boolean);
  if (segments.length === 0) return "";
  // Skip the locale prefix ("tr" in "/tr/pricing" → "pricing")
  if (/^[a-z]{2}$/i.test(segments[0])) segments.shift();
  return segments.join("/");
}

/**
 * Resolve page path to the list of namespaces the page actually uses.
 * Returns `null` to signal "fetch all" (used when path is unknown).
 */
export function getCdnNamespacesForPage(pagePath: string): string[] | null {
  const specs = PAGE_NAMESPACES[pagePath] ?? PAGE_DEFAULTS;
  // Strip any dot-path specs down to their top-level CDN namespace.
  // "marketing.compare.crowdin" → "marketing" (CDN has one file per top-level ns).
  const set = new Set<string>();
  for (const spec of specs) set.add(spec.split(".")[0]);
  return [...set];
}

import { createRootRouteWithContext } from "@tanstack/react-router";
import { getMessages } from "@better-i18n/use-intl/server";
import type { Messages } from "@better-i18n/use-intl";
import { i18nConfig } from "../i18n.config";
import {
  extractPagePath,
  getCdnNamespacesForPage,
} from "../lib/page-namespaces";

// Per-request side channel: SSR fills this, the component reads + deletes.
// Keyed by a unique requestId so concurrent CF Worker requests don't collide.
const ssrMessagesByRequest = new Map<string, Messages>();
const SSR_MAP_MAX_SIZE = 50;

export const Route = createRootRouteWithContext<{
  locale: string;
  requestId: string;
}>()({
  beforeLoad: async ({ location }) => {
    // ... your locale detection logic ...
    const locale = detectLocale(location.pathname);
    const requestId = crypto.randomUUID();
    return { locale, requestId };
  },

  loader: async ({ context, location }) => {
    const pagePath = extractPagePath(location.pathname);
    const namespaces = getCdnNamespacesForPage(pagePath) ?? undefined;

    const messages = await getMessages({
      project: i18nConfig.project,
      locale: context.locale,
      namespaces,
    });

    const isSSR = typeof document === "undefined";
    if (isSSR) {
      // LRU-ish eviction — stop unbounded growth on errored requests
      if (ssrMessagesByRequest.size >= SSR_MAP_MAX_SIZE) {
        const oldest = ssrMessagesByRequest.keys().next().value;
        if (oldest) ssrMessagesByRequest.delete(oldest);
      }
      ssrMessagesByRequest.set(context.requestId, messages);
    }

    // On SSR return undefined — don't bloat dehydrated loader data.
    // On client navigation, return messages so the provider has them.
    return { locale: context.locale, messages: isSSR ? undefined : messages };
  },

  component: RootComponent,
});

function safeJsonForScript(value: unknown): string {
  // Prevent </script> injection + LS/PS that break HTML parsers
  return JSON.stringify(value)
    .replace(/</g, "\\u003c")
    .replace(/>/g, "\\u003e")
    .replace(/&/g, "\\u0026")
    .replace(/\u2028/g, "\\u2028")
    .replace(/\u2029/g, "\\u2029");
}

function getClientMessages(): Messages | undefined {
  if (typeof document === "undefined") return undefined;
  const el = document.getElementById("__i18n_messages__");
  if (!el?.textContent) return undefined;
  try {
    return JSON.parse(el.textContent) as Messages;
  } catch {
    return undefined;
  }
}

function RootComponent() {
  const { locale, requestId } = Route.useRouteContext();
  const loaderData = Route.useLoaderData();

  const messages = (() => {
    // SSR: pull from the per-request map, then drop it
    if (typeof document === "undefined") {
      const msgs = ssrMessagesByRequest.get(requestId);
      if (msgs) ssrMessagesByRequest.delete(requestId);
      return msgs;
    }
    // Client: loader data (navigation) > hydration script (first load)
    return loaderData?.messages ?? getClientMessages();
  })();

  return (
    <html lang={locale}>
      <body>
        <script
          type="application/json"
          id="__i18n_messages__"
          suppressHydrationWarning
        >
          {safeJsonForScript(messages)}
        </script>
        <BetterI18nProvider
          project={i18nConfig.project}
          locale={locale}
          messages={messages}
        >
          <Outlet />
        </BetterI18nProvider>
      </body>
    </html>
  );
}

[i18n] pricing: fetching 4 namespaces (of 103) [common, footer, navigation, pricing]

X-Batch-Count: 4
X-Batch-Requested: 4
X-Cache-Status: HIT | MISS