Use i18n in document head

[jcfauchet]

Hi there,
I'm configuring Qwik-Speak on my project and I would like to know if there is a way to use translation in the page DocumentHead ?
I mean into the head object exported from each page in order to update the page meta ?
Thank you so much for your help :)

Regards

[robisim74]

Please see Quick start:

• Head metas
• And Extraction: metas are dynamic translations, and must be added to runtimeAssets

[jcfauchet]

Nice, that's perfect ! Thank you so much @robisim74

[robisim74]

Alternatively, from v0.17.0 you can translate also in dynamic head:

export const head: DocumentHead = () => {
  const t = inlineTranslate();

  return {
    title: t('app.head.home.title', { name: 'Qwik Speak' }),
    meta: [
      {
        name: 'description',
        content: t('app.head.home.description')
      }
    ],
  };
};

[fprl]

Hi @robisim74 , I was going to create an issue but luckily I saw this discussion. Is there a way to also use this with lazy-loaded (scoped) translations? e.g of how my page looks like:

useSpeak({ assets: ["search"], runtimeAssets: ["searchRuntime"] });

and then

export const head: DocumentHead = () => {
  const t = inlineTranslate();

  return {
    title: t('search.meta_title'),
    meta: [
      { name: 'description', content: t('search.meta_description') },
      { name: 'keywords', content: t('search.meta_keywords') }
    ],
  };
};

I see that I have access to everything in app, I assume this is because its declared in the assets field of the speak-config file but I would like to have the meta of the pages colocated in each translation file.

From what I understand I have three options:

1. use app
2. server translations? I don't know how this impacts the performance though ---> I forgot that its not possible to have an async head
3. create a new asset only for meta
4. Is there other way?

About the 3., does it have any performance implications? I mean, I think it wouldn't have any if its loaded in the server, but will it reach the client?

Thank you

[robisim74]

Hi @fprl ,

Server side Qwik renders the DocumentHead at app level, and not at page level, so it is necessary to insert the head translations in the assets property of speak-config.ts.

However you can create an asset only for meta, and there will be no performance implications: server side assets are cached, and client side are inlined in files sent to the browser at build time (unlike runtimeAssets).

[fprl]

Thanks a lot @robisim74!

Just to have it clear, when you say inlined in files sent to the browser you mean in the components? for example, a section that have some listeners and when the code gets downloaded and executed, the translation/s are inlined in the q-*.js file? So, if the component is mostly static, the translation never gets to the client?

[robisim74]

Yes, but during the build, not at runtime. q-*.js are generated for each language with the text of translations at compile time. See here for details: https://github.com/robisim74/qwik-speak/blob/main/docs/inline.md

[fprl]

Wow, this library is amazing, thanks for that.

Last question, Is there a technical reason to not support js for translations? I used next-intl and the ergonomics are really nice, specially the typing.