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?
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
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.
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.
I'd like to follow up with this. Below is my index.vue file template.
<template>
<div id="body-container">
<slice-zone type="homepage-type" queryType="single"/>
<div v-if="posts.length !== 0" class="blog-main">
<!-- Template for blog posts -->
<section v-for="post in posts" :key="post.id" v-bind:post="post" class="blog-post">
<!-- Here :post="post" passes the data to the component -->
<blog-widget :post="post"></blog-widget>
</section>
</div>
</div>
</template>
The problem is that the slice-zone is loading after the posts for the loop below. An example of this being an issue is trying to setup ScrollTriggers with GSAP. The slice zone delay causes the starting/end points to register early and be wrong when the slice zone content loads and pushes that content down.
I've found a workaround by creating a unique Slice and adding the blog-widget component inside of that. Is that good practice or will that run into issues?
Either way I'm still wondering if there is a method to what I'm trying to do already clarified within Prismic + Nuxt.
I can see that you're using the slice-zone's autofetching functionality, so the Slice Zone is performing the API query for you automatically. In theory, that shouldn't cause any issues. But I wonder if it's not performing as expected with your config. There's a straightforward workaround: you can perform the query manually and pass the results as a prop to the slice-zone. This is described in the "Query and resolve manually" section of the vue-slicezone Technical Reference:
You can ignore the information about resolving manually. You would only need the instructions for fetching manually.
And, instead of writing a getContent() method, you could perform your API query in Nuxt's asyncData hook:
Let me know if that helps and if you have any further questions
