Paraglide JS

Tool

Server Side Rendering (SSR) / Static Site Generation (SSG)

Paraglide JS provides first-class support for server-side rendering (SSR) and static site generation (SSG) through the paraglideMiddleware().

[!TIP] For middleware setup, framework examples, and troubleshooting, see the Middleware Guide.

Server Side Rendering (SSR)

Setting up the paraglideMiddleware() automatically enables server-side rendering (SSR) for your application:

import { paraglideMiddleware } from './paraglide/server.js';

app.get("*", async (request) => {
  return paraglideMiddleware(request, async ({ request, locale }) => {
    return new Response(html(request));
  });
});

The middleware handles locale detection, URL delocalization, and request isolation automatically. See the Middleware Guide for details.

Static Site Generation (SSG)

Your framework of choice (e.g. Next.js, SvelteKit, etc.) needs to know the localized URLs of your pages to generate them during build time.

https://example.com/about
+https://example.com/de/about
+https://example.com/fr/about

Several possibilities exist to communicate these URLs to your framework:

Site crawling (invisible anchor tags)

Some static site generators crawl your site during build time by following anchor tags to discover all pages. You can leverage this behavior to ensure all localized URLs of your pages are generated:

Add invisible anchor tags in the root layout of your application for each locale
Ensure the paraglideMiddleware() is called

You can adapt the example beneath to any other framework

import { locales, localizeHref } from "./paraglide/runtime.js";

// in the root layout
function Layout({ children }) {
  return (
    <>
      <div>{children}</div>
      {/* add invisible anchor tags for the currently visible page in each locale */}
      <div style="display: none">
        {locales.map((locale) => (
          <a href={localizeHref(`/about`, { locale })}></a>
        ))}
      </div>
    </>
  )
}

The rendered HTML of the page will include the invisible anchor tags, ensuring they are generated during build time. The framework will crawl the HTML and follow the anchor tags to discover all pages.

<div>
  <p>My Cool Website
</div>
+<div style="display: none">
+  <a href="/de/about"></a>
+  <a href="/fr/about"></a>
+</div>

Programmatic Discovery

If invisible anchor tags are not an option, some frameworks provide APIs to discover the localized URLs during build time. Figure out which API your framework provides and adapt the example above accordingly.

Next.js has generateStaticParams() API to discover all localized URLs.
Astro has getStaticPaths()