Paraglide in Server Components

[anaclumos]

Problem

Can we use Paraglide in Server Components? I know paraglide runs on client but would there be a way to feed the data? I am using Next.js 14 App Dir.

[samuelstroschein]

Hi @anaclumos,

I moved this to Q&A.

Yes. Our initial tests with the NextJS app dir and RSC worked fine, see https://github.com/inlang/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-next/example. The reasoning is simple. Paraglide compiles plain JS functions. RSC can render JS functions.

@LorisSigrist can share more about an official NextJS adapter.

[LorisSigrist]

Yes! You can use ParaglideJS with Server Components.
You can even mix Server & Client components and it still works! You just need to make sure that the language get's set on both the server and the client.

Here is an example project on how to do that. Soon there will be a written Guide on how to do this too. We will also encapsulate all the reuseable parts into a package, so that you won't have to do the setup on every project.

Hope that helps!

[IAPBenediktZwoelfer]

Page not found

[LorisSigrist]

Sorry, the branch it linked to was merged & deleted. I updated the link

[mkoreo]

@LorisSigrist Hey, I've checked your adapter for next.js App directory.
It works, but calling headers() from 'next/headers' in LanguageProvider.tsx makes all routes dynamic (even when using generateStaticParams to generate all [lang] params.)
That means that all static rendering is disabled, every page request is rerendered.

An alternative approach I'm implementing now, is to receive the "lang" param (incase opted for dynamic [lang] routes) in a page/layout and provide it to the m-function using prop drilling ex. m.someI18nKey({}, { languageTag: lang }) for all server components. That approach works, but the implementation with the empty object, followed by the option object isn't exactly clean.
But it allows static rendering.

[LorisSigrist]

Oh, I wasn't aware of that. Great point!
If you get it working with using the param directly, could you send us a link to your repo so we can update the guide? That would be incredibly helpful!

[thenbe]

For anyone landing here from a search engine, there is now a ticket open for this feature here: opral/inlang-paraglide-js#109