DON'T Make This Mistake with Next.js Server Components (BAD performance!)
HTML-код
- Опубликовано: 8 сен 2024
- Server Components can hurt your performance if you don't use them correctly.
Next.js Server Components - nextjs.org/doc...
*Newsletter*
Newsletter 🗞 - www.jamesqquic...
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.co...
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquic...
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
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
Thanks to Next.js documents, I sorted this out a while ago. It really helps with creating a good user experience and managing your vitals.
Good mention, James!
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....
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
Ok, but whats google index sees? Will it penalize you?
What was that snippet tool you popped up? Thanks.
Great content as always, keep it up J!
THANK YOU!!
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?
Pretty awesome vd sir and I will definitely try this, it's very important. Thanks so much for your efforts.
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!
God, I love the app router. Thanks for this video, didn't know this. You saved my booty
haha glad to help!
this is what i subscribed this channel for
Yes! Love to hear it. What else are you interested in?
Thanks for the tip! I would like to know if it breaks the SEO?
Amazing content!!! Thank you!
Very nice. Thanks!
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!!! 🙌
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?
💯 using server components. 🤓
Awesome content!
THANK YOU!
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!