Skip to content

Remix v3 i18n · Server and browser

Remix v3 i18n, from the request to the browser.

The new Remix v3 is not React Router Framework Mode and it is not a React framework. Palamedes composes with its Node TypeScript loader, browser asset server, Fetch request model, and Remix UI runtime so one locale reaches SSR, Frames, hydration, and interaction.

Integration
Node + assets

Post-compile transforms for server and browser modules.

Verified against
Remix 3.0.0-rc.1

Exact example pin with smoke and Chromium verification.

Current scope
Full stack

Server scope, browser macros, rich messages, and catalog bootstrap.

Locale models
4 + browser proof

Four smoke strategies and a focused full-stack cookie flow.

npm package@palamedes/remixv1.25.02.1K downloads / month

01 — The framework problem

Remix v3 splits full-stack compilation across two post-compile loaders.

Server TypeScript flows through Node while browser modules flow through the asset server. A complete integration must transform both outputs, keep request state isolated, and install the matching catalog before translated client code runs.

02 — The Palamedes model

Join both Remix loaders, then carry one locale through the document.

Palamedes adds no separate build. It transforms the JavaScript Remix already compiled, scopes the server runtime to each request, and embeds serializable ICU strings in an inert document payload before browser modules initialize.

A composable Node loader

Register remix/node-tsx first and @palamedes/remix/register second. Macro-containing server modules are transformed once when Node loads them.

A post-compile asset loader

createPalamedesRemixAssetLoader() transforms ordinary and rich browser macros before Remix resolves imports, HMR boundaries, source maps, and minification.

One document catalog

createRemixI18nServer() scopes Fetch requests and emits the selected ICU catalog; initializeRemixClientI18n() installs it before translated browser code loads.

03 — In TypeScript

Wire both transforms, then initialize the browser from the server-selected catalog.

server.ts + app/public/entry.ts

// package.json
{
  "scripts": {
    "start": "node --import remix/node-tsx --import @palamedes/remix/register server.ts"
  }
}

// server.ts
import {
  createPalamedesRemixAssetLoader,
  PALEMEDES_REMIX_ASSET_PACKAGES,
} from "@palamedes/remix"
import { createAssetServer } from "remix/assets"

const assets = createAssetServer({
  basePath: "/assets",
  allowFiles: ["app/**/public/**"],
  allowPackages: ["remix", ...PALEMEDES_REMIX_ASSET_PACKAGES],
  sourceMaps: process.env.NODE_ENV === "development" ? "external" : undefined,
  scripts: { loaders: [createPalamedesRemixAssetLoader()] },
})

// app/public/entry.ts
import { createI18n } from "@palamedes/core"
import { initializeRemixClientI18n } from "@palamedes/remix/client"

initializeRemixClientI18n({ createI18n })
await import("./interactive.js")

Render remixI18n.renderClientBootstrap(locale) before the external entry. Rich UI source imports Trans, Plural, Select, and SelectOrdinal from @palamedes/remix/macro; the same asset loader lowers them for the browser.

04 — Locale strategy

Choose the URL model that fits your Remix v3 product.

The same server helper supports cookie, route, subdomain, and TLD decisions. Every strategy is smoke-verified; the cookie example additionally proves Spanish SSR and hydration, browser macros and rich messages, interaction, and a full-navigation switch to German.

Cookie

One URL for all locales. Best for apps behind login where SEO is irrelevant and switching should be instant.

◌ local / CIsource →

Route segment

/de/checkout-style paths. The SEO-friendly default for public content with indexable localized pages.

◌ local / CIsource →

Subdomain

de.example.com. Clean separation per market, works well with regional CDNs and analytics splits.

◌ local / CIsource →

Top-level domain

example.de vs example.com. Maximum market trust; Palamedes maps each domain to its locale.

◌ local / CIsource →

Compare the four locale strategies →

05 — Proof and boundaries

Four server proofs and one focused full-stack browser proof.

Remix v3 remains separate from React Router Framework Mode. CI starts all four locale-strategy servers and runs Chromium against the canonical cookie example with SSR, hydration, rich messages, interaction, and locale navigation.

Transforms
Server + browser

Ordinary and rich macros are checked after Remix compilation.

Catalog path
PO → document

Server PO imports and inert browser bootstrap are checked.

Remix UI
Rich + Frames

Rich elements, streamed Frames, and direct frame requests are covered.

Hosting
Local / CI

No public Remix v3 demo is claimed yet.

06 — Questions

Remix v3 i18n questions, answered

The short version of the decisions that usually block an implementation.

Is Remix v3 the same thing as React Router Framework Mode?
No. React Router Framework Mode remains a React framework with a Vite plugin, route modules, loaders, and actions. Remix v3 is a separate server-first full-stack project with its own packages, router, loaders, UI direction, and runtime model.
Does Palamedes support Remix v3 without React?
Yes. The integration uses Remix UI rather than React. It transforms ordinary core macros plus Remix-native Trans, Plural, Select, and SelectOrdinal components in server and browser modules.
Can Remix v3 browser modules use Palamedes macros?
Yes. Add createPalamedesRemixAssetLoader() to scripts.loaders and allow PALEMEDES_REMIX_ASSET_PACKAGES. Initialize the document bootstrap before importing translated modules; browser PO imports remain unsupported.
Is Remix v3 support production-ready?
Treat it as a preview integration for the exact tested Remix 3.0.0-rc.1 contract. Full-stack behavior is CI-verified, including Chromium, but the upstream release is still a prerelease and no public hosted Palamedes demo has been verified yet.

07 — Keep exploring

See how the same model meets a different host.

Follow one Remix locale from the request through browser interaction.