How to prerender for SSR only when a svelte component is fully initialized ?

[mulder999]

Hello fellow developers,

I'm working on a multilingual website using SvelteKit, and I have a specific scenario where I'd appreciate some guidance. My goal is to create internal links from keys used as lookups within JSON files. This process works smoothly when I load the JSON data synchronously using import for each language. However, this approach requires writing multiple import statements for each language, and my project includes many languages.

I'm striving for cleaner and more maintainable code, so I'd prefer to handle this within a loop. The challenge arises when I use async imports (e.g., import(./${lang}/menu.json)), which works well at runtime. Unfortunately, during server-side rendering (SSR), my component is rendered before the JSON data is fully loaded, leading to undefined href attributes for internal links.

I've attempted to use await in the src\routes+layout.ts file to delay Svelte component prerendering. However, it seems that the await construct is ineffective for Svelte components.

Has anyone encountered a similar scenario, and do you have any suggestions on how to handle this? Specifically, is there a way to ensure that my Svelte component is prerendered only after the necessary data is loaded during SSR?

Any insights or alternative approaches would be greatly appreciated. Thank you for your time and assistance!

Best regards,

[eltigerchino]

Do you mind sharing the code of your load function? This issue you've described should not be occurring.

[mulder999]

Thank you for coming back. During my efforts to create a minimal example, I realized that I was in fact unsubscribing from the store that was getting the JSON data within the promise I used to await. This rendered my await statement ineffective within the page.load function.

My very bad. Sorry for the trouble.