Advanced

`accept-language`

Can be used to set default language.

<body>
  <FluentProvider acceptLanguage={["en"]}>
    <RouterOutlet />
  </FluentProvider>
</body>

SSR-stage dynamic localization

entry.ssr.tsx

import { parseAcceptLanguage } from "@yozora-tech/qfluent";

export default createRenderer((opts) => {
  const acceptLanguage = parseAcceptLanguage(
    opts.serverData.requestHeaders["accept-language"] || "en",
  );
  return {
    jsx: <Root acceptLanguage={acceptLanguage} />,
  };
);

root.tsx

export default component$(
  ({ acceptLanguage }: { acceptLanguage: string[] }) => {
  return (
    <body>
      <FluentProvider acceptLanguage={acceptLanguage}>
        <RouterOutlet />
      </FluentProvider>
    </body>
  );
});

Limitation: production build (npm run build) is post-SSR.

ssr: true is in adapter (npx qwik add) config (adapters/*/vite.config.ts).
ssr: false may cause build failure at the moment.