Translations are not rendered during SSR
PaulMaly opened this issue · 3 comments
I don't see any translations/locales in SSR output. Texts appearing only on frontend. Could you please give me any ideas why it can happened?
As far as I know, everything works well in terms of SSR within our examples have you tried to use some of them in your project? I think there might be an issue with your implementation..
Actually, I just copy relevant parts of multi-page example, eg. cookie usage, reading the header etc, but replaced the loading of local translations files by my backend. I just start to test it with sveltekit and looks like I don't have much self-written code to face with implementation issue. I've +layout.server
with such content:
import { locales, loadTranslations } from '$lib/services/i18n';
import { getLocale } from '$lib/services/api';
export async function load({ url, cookies, request, fetch }) {
const { pathname } = url;
// Try to get the locale from cookie or user preferred locale
const localeCode =
cookies.get('locale') || `${`${request.headers.get('accept-language')}`.match(/[^(,|;)]*/)}`;
const supportedLocales = locales.get();
const locale = await getLocale(
fetch,
supportedLocales.includes(localeCode) ? '/' + localeCode : ''
);
await loadTranslations(locale.locale, pathname);
return {
locale
};
}
And +layout.js
with this:
import { setLocale, setRoute } from '$lib/services/i18n';
export async function load({ url, data }) {
const { pathname } = url;
const { locale } = data;
await setRoute(pathname);
await setLocale(locale.locale);
return {
locale
};
}
In SSR output I see all necessary markup (html elements, forms, button etc) except texts. All places where I expect text are replaced by fallback values from sveltekit-i18n config, like:
const config = {
fallbackValue: '-',
loaders: [...]
};
<h1 data-aos="fade-up-sm" class="mb-6 text-[35px] sm:text-[50px] xl:text-[65px]">
-
</h1>
What am I did wrong? Will be appreciated for any ideas )))
The issue solved. Looks like, I had the problems with universal fetch requests on server-side. Fetch was working only on client, thats why text appears only on frontend side