Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translations are not rendered during SSR #160

Closed
PaulMaly opened this issue Dec 12, 2023 · 3 comments
Closed

Translations are not rendered during SSR #160

PaulMaly opened this issue Dec 12, 2023 · 3 comments

Comments

@PaulMaly
Copy link

PaulMaly commented Dec 12, 2023

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?

@PaulMaly PaulMaly changed the title Translations are not rendered during SSR, Translations are not rendered during SSR Dec 12, 2023
@jarda-svoboda
Copy link
Member

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..

@PaulMaly
Copy link
Author

PaulMaly commented Dec 12, 2023

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 )))

@PaulMaly
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants