Difference between Loading.js file and Suspense
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
What is the main difference between loading file and suspense being used for data fetching parts. I am using both but only can see the loading text from loading file while changing routes which has data fetching from server. The skeleton is not showing ever.
#help-forum
#help-forum
15 Replies
@Asiatic Lion What is the main difference between loading file and suspense being used for data fetching parts. I am using both but only can see the loading text from loading file while changing routes which has data fetching from server. The skeleton is not showing ever.
<#1007476603422527558>
the loading.js is also just a Suspense, that wraps the page
Asiatic LionOP
@B33fb0n3 Okay. My main issue is on navigation between routes it takes a lot time to navigatie. Even if there is no data fetching. By default all my components are server components.
@Asiatic Lion <@301376057326567425> Okay. My main issue is on navigation between routes it takes a lot time to navigatie. Even if there is no data fetching. By default all my components are server components.
Can you try to go in production using the commands: „next build“ and „next start“? Then you are in production and can still enter your page at localhost:3000. Then navigate how you would do normally. Are the pages loading fast now?
Asiatic LionOP
@B33fb0n3 Yes. Please see this link. https://nextjs-learning-dashboard-app1.vercel.app/dashboard
Here when I navigate to
Here when I navigate to
invoices route from home It doesn't instantly navigates. It takes some seconds to navigate. That's what I am talking about.@B33fb0n3 the navigation is instantly for me 🤔
Asiatic LionOP
Okay so I am talking about the first time when clicked. After once page loaded I guess it's cached so it's fast. Look at 0.01 sec.
@Asiatic Lion Okay so I am talking about the first time when clicked. After once page loaded I guess it's cached so it's fast. Look at 0.01 sec.
I thought so too, because of that I reloaded the page, but then it looks like there are suspense boundaries, so the page still switches instantly (see from 0:10)
Asiatic LionOP
Ohh okay. Thank you anyway @B33fb0n3
@Asiatic Lion Ohh okay. Thank you anyway <@301376057326567425>
happy to help. Please mark solution
without seeing the code it's hard to even guess
Asiatic LionOP
@joulev Do you also see a minute delay while navigating from home to invoices for the first time ? First time is only important because if it's taking too much delay then the user may feel website not responsive. After first time it be cached.
Yes I do. Subsequent navigations for the first 30s are instant thanks to the 30s router cache, but the first navigation is indeed slow yeah. That said, there is too little info for me to guess anything.
@joulev Yes I do. Subsequent navigations for the first 30s are instant thanks to the 30s router cache, but the first navigation is indeed slow yeah. That said, there is too little info for me to guess anything.
Asiatic LionOP
Thank god somebody gets me 😭 I will send repo here.
Asiatic LionOP
@joulev Hey, this is the https://github.com/joseph-9900/nextjs-dashboard repo.
And this is the website https://nextjs-learning-dashboard-app1.vercel.app/dashboard
And this is the website https://nextjs-learning-dashboard-app1.vercel.app/dashboard