0

I have a full static NUXT application, so i would expect all content on pages to be ready immediately after route change.

I'm experiencing that there is a slight delay between the route change and each component appearing on the page, resulting in layout shifts.

Is this expected behaviour?

I've made a minimal reproduction which produces the same behaviour. (Sometimes ;) ) https://github.com/Jonatan-bs/static-nuxt-test

It's a create-nuxt-app with a page that renders a lot of components dynamically.

to reproduce:

  1. npm run install
  2. npm run generate
  3. npm run start
  4. click on 'test' link, which links to another page

Expected behaviour:
All components would be present immediately after the page change, since it's a static generated app.

Observed behaviour:
As shown on the attached picture

  1. after route change the component with yellow background is rendered.
  2. then shortly after, the component with black background is rendered

First component is shown on page

Second component is shown on page

kissu
  • 40,416
  • 14
  • 65
  • 133
Jonatanbs
  • 223
  • 2
  • 9
  • You're using `asyncData` to fetch some data from an API here. The behavior is as expected: you click on a link to another route, it fetches the API, then navigates to the route itself. If you want to have a **full static** app with Nuxt, give a read to my answer here: https://stackoverflow.com/a/68431975/8816585 – kissu Jul 03 '22 at 17:54
  • 1
    I'm using target: 'static' and 'nuxt generate', which should result in a 'full static app' - https://nuxtjs.org/announcements/going-full-static/. AsyncData is ran at 'build' and therefore there are no API calls done client-side. Am i missing something here? – Jonatanbs Jul 03 '22 at 19:10
  • Oh yeah, my bad indeed: you're right. So I checked your github repo a bit more and there is a simple reason to your "performance issue". You're doing a loop on `30000` iterations on the 2 pages, so it's quite heavy on a page to load 30k components, then remove them and put them back again. Trying this on a Macbook, it takes several seconds on my side. This is not a bug, just limitations of the DOM in the browser. You're not supposed to make such kind of operation (a lot of components). As you can see, you're blocking your main thread by the heavy load of all of them + make your `% ` condition. – kissu Jul 03 '22 at 20:32

1 Answers1

0

The amount of memory taken (several MB) + several thousands of nodes at the same time are not crashing your page, you should already be happy that this test passes. This is because Vue is pretty lightweight. You can't ask the browser to smoothly switch from one page to the other, especially in an SPA context where stuff needs to be removed + added back.

enter image description here

More details in my previous comment are available here: Nuxt SSG: Page doesn't have all content immediately after route change

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I added a lot of components to make the behaviour more visible (First one component renders, then the next). I've now set it down to 30 components and it still happens sometimes, just much faster. – Jonatanbs Jul 06 '22 at 09:49