Nuxt- page load delay

Hi All I am currently creating a rather robust website for an agency, each page is composed of its own slices and can be translated in multiple languages.

The issue I am currently trying to resolve, is that when I visit a page/ or change routes - the page ''flashes" - only showing the footer and header and then the rest of the content is loaded.

I tried to resolve this by using a Nuxt Loading component, however this did not resolve the problem. The loading animation would finish but then the user would still have to wait for the slices to load.

From my understanding the problem is being created because the Header & Footer component are asynchronously loaded and used through out all of the App, so no additional request need to be made. But for each page, we have to make additional request to get all the slice information.

Is there a more efficient way of loading slice information between routes, so the user does not have a long delay between route changes & I can resolve the flash?

Hi @soheima.canton,

Thanks for reaching out.

Well, here is what I understood if you are using Nuxt with SSR, your page would be rendered server-side on the first load, and the whole page would come simultaneously (the layout should be part of the page.)

But if you, for example, click on a link that takes to another page in your website, then as the layout (header and footer) are already loaded, only the new content will be reloaded, which makes this flashing experience.`

So if my understanding is correct for the issue, you can make your website fully statically generated (SSG) or use some sort of loading where you display some page skeleton until the content is ready.

Also, I have found this thread that seems to be discussing the same issue.

Also, it would be helpful to to share your code with me or at least your application configurations the way you include the layout.

Please let me know if you need any further assistance,
Fares

Hi Fares,

Thanks for getting back to me. I am not using ssr and it would not be an option in my case but more broadly speaking, how would anyone else with slice machine solve this problem? Because the slice machine component would make the fetch call to Prismic, on each route change. Because every time the user visits a new page a new fetch is made.

as sharing code, I would only be able to share the project via email - as it is in a private repo.

Ok, I will investigate that and get back to you and will keep this thread open if someone in the community faced the same issue.

Hi @soheima.canton,

I'm going to take over this thread from Fares. Do you have prefetching enabled in your app? It should be enabled by default if you're using NuxtLink components. This could help with your problem.

Sam