Since the deals probably don't update that often, why not just pre-render the page and then do something like revalidatePath/Tag from an API route to on demand for the page to be rebuilt when you've updated content in your database? No reason to make this thing dynamic.
There is only one major pitfall, async generateMetadata will block rendering loading component and will increase TTFB Issue with this is already submitted and all we have to do is wait for them to fix it
It’s even better if you don’t do asynchronous calls in the main component and then create skeletons for individual components and use suspense as needed, not the default fallback
does this also not work if you wrap the component when it's being rendered with a suspense? Is what you're trying to say that you can either wrap it with a suspense yourself or add the loading.tsx so it handles that for you?
I have a data fetching from server and also added loading.js along with suspense fallback, but core vitals are bad, it shows maximum execution time is 10s which is slow. How can I fix it?
Loading.js is used when we do soft navigation. Also if you see the server component demo it's not a root page. So if you check the score on the root it would be different. In more usually we have different components at root level with JS like scroll to top button, header, footer, shadcn theme (which adds more css chuck) and animation library such as framer. I've shadcn carousel with auto scroll on my home page which is using more js plugin and it's hard to offload it. You may also gonna need to check the intersection observer implementation for things other than image which is by default optimized well if you apply the right attributes and configurations.
I think it doesn't support SSR, absolutely when JavaScript has been disabled. for example in the company that i work there, the marketing team ask me that the content should be visible when JavaScript is disable. I would be happy to hear other experience.
Thanks for this. But here is what I saw when using loading bar. I have client side and server side processing. The loading bar appears. then the site appears and the it snaps back to loading bar and then the site appears fully. While my ttfb improves, the whole site is not visible until fully loaded. And I have a very heavy site. Any thoughts? I removed the loading so that at least the top part of the site becomes visible rather quickly.
If we are concerned for the SEO. Should we send loader first? As web crawlers may not receive actual data and thus not indexing the page correctly? The approach you shared is a better user experience for sure but is it good for SEO as well?
For SEO purposes, you'd send down non-async data first. For example, the head tags, the h1, etc. Those things most likely don't need to be asynchronously loaded, and therefore wouldn't need the loader. So, I'd try to avoid async loading data that is important for SEO in general
Thanks! Here's the extension. This link looks crazy, but I promise it's where I found it chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
Page used to load instantly in page directory but it takes 3-4 seconds in app router where I have my page as server page and components as client inside of this page Even when I added use client the performance is good but not with server page Do you know the reason?
I'm able to run functions asyncronously which are imported from files marked as "use server" and these are client component, is it good? or should i move alll these to a parent which is server component?
Are you sure with this information ? What happens if i wrap suspense from react ? I have been using that to suspend my server components because i have to suspend a specific component in the page is this a bad practice?
No, it is not a bad practice. I think it is a recommended way at this point by Next.js team, since they have been pushing for the PPL approach. You suspense as few as possible on your page, narrow it down to the least amount of dynamic parts and let the rest be served statically by your build.
Love it! I like to implement a skeleton in the loading file so the user knows what to expect right away then the data loads in. Great job!
Another amazing RUclips watching other youtubers video
Your both videos are amazing and I watch all of them!
haha thanks! We are both big fans of each other I think!
So good! Do you have a video on that?
@@JamesQQuick why did you add I think at the last?? 😂
@@JamesQQuick yes I also thought skeleton of that same UI would be better loading state for the UX
Great content as always, keep it up J!
THANK YOU!!
Since the deals probably don't update that often, why not just pre-render the page and then do something like revalidatePath/Tag from an API route to on demand for the page to be rebuilt when you've updated content in your database? No reason to make this thing dynamic.
That would help with SEO....
Thanks for letting us know. Just a query will SEO be affected by this?
If you're using pages router looks like the docs suggest it's doable to do this as well, would be interested to see an implementation of it
There is only one major pitfall, async generateMetadata will block rendering loading component and will increase TTFB
Issue with this is already submitted and all we have to do is wait for them to fix it
What was that snippet tool you popped up? Thanks.
Pretty awesome vd sir and I will definitely try this, it's very important. Thanks so much for your efforts.
I love these straight to the point videos, thanks.
BTW. Your text cursor is too distracting
It’s even better if you don’t do asynchronous calls in the main component and then create skeletons for individual components and use suspense as needed, not the default fallback
does this also not work if you wrap the component when it's being rendered with a suspense? Is what you're trying to say that you can either wrap it with a suspense yourself or add the loading.tsx so it handles that for you?
Yeah you could implement that functionality by using suspense yourself or just take advantage of the built-in suspense by using the loader component.
@@JamesQQuick Thank you for the clarification :). Keep up the good work!
I have a data fetching from server and also added loading.js along with suspense fallback, but core vitals are bad, it shows maximum execution time is 10s which is slow.
How can I fix it?
Loading.js is used when we do soft navigation. Also if you see the server component demo it's not a root page. So if you check the score on the root it would be different. In more usually we have different components at root level with JS like scroll to top button, header, footer, shadcn theme (which adds more css chuck) and animation library such as framer.
I've shadcn carousel with auto scroll on my home page which is using more js plugin and it's hard to offload it. You may also gonna need to check the intersection observer implementation for things other than image which is by default optimized well if you apply the right attributes and configurations.
Ok, but whats google index sees? Will it penalize you?
I think it doesn't support SSR, absolutely when JavaScript has been disabled. for example in the company that i work there, the marketing team ask me that the content should be visible when JavaScript is disable. I would be happy to hear other experience.
Amazing content!!! Thank you!
this is what i subscribed this channel for
Yes! Love to hear it. What else are you interested in?
God, I love the app router. Thanks for this video, didn't know this. You saved my booty
haha glad to help!
Thanks for the tip! I would like to know if it breaks the SEO?
Very nice. Thanks!
Thanks for this. But here is what I saw when using loading bar. I have client side and server side processing. The loading bar appears. then the site appears and the it snaps back to loading bar and then the site appears fully. While my ttfb improves, the whole site is not visible until fully loaded. And I have a very heavy site. Any thoughts?
I removed the loading so that at least the top part of the site becomes visible rather quickly.
Awesome content!
THANK YOU!
If we are concerned for the SEO. Should we send loader first? As web crawlers may not receive actual data and thus not indexing the page correctly? The approach you shared is a better user experience for sure but is it good for SEO as well?
For SEO purposes, you'd send down non-async data first. For example, the head tags, the h1, etc. Those things most likely don't need to be asynchronously loaded, and therefore wouldn't need the loader. So, I'd try to avoid async loading data that is important for SEO in general
The crawlers know to wait. Loading indicators will actually speed up your website loading times, improving your user experience and thereby SEO.
Great Video!!!
I can't find the web vitals extension anywhere. Could you please share the link for the same ???
Thank you.
Thanks! Here's the extension. This link looks crazy, but I promise it's where I found it chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
@@JamesQQuick Thanks!!! 🙌
Page used to load instantly in page directory but it takes 3-4 seconds in app router where I have my page as server page and components as client inside of this page
Even when I added use client the performance is good but not with server page
Do you know the reason?
I'm able to run functions asyncronously which are imported from files marked as "use server" and these are client component, is it good? or should i move alll these to a parent which is server component?
Thanks 👍
Are you sure with this information ?
What happens if i wrap suspense from react ? I have been using that to suspend my server components because i have to suspend a specific component in the page is this a bad practice?
No, it is not a bad practice. I think it is a recommended way at this point by Next.js team, since they have been pushing for the PPL approach.
You suspense as few as possible on your page, narrow it down to the least amount of dynamic parts and let the rest be served statically by your build.
Why LCP is below 2 seconds though? Is it because of the streaming?
Yep. It can load and paint the initial html. It then streams in other data asynchronously.
@@JamesQQuick Thank you, keep it up! Your content is great!
Ok but where are the semi colons...
I stopped watching when I saw data being fetched at page level and passed down to component...
💯 using server components. 🤓
You lost me on prisma