Amazing content!!! Thank you!

Pretty awesome vd sir and I will definitely try this, it's very important. Thanks so much for your efforts.

Great content as always, keep it up J!

@JamesQQuick

Ай бұрын

THANK YOU!!

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!

@kizigamer6895

Ай бұрын

Another amazing KZread watching other youtubers video Your both videos are amazing and I watch all of them!

@JamesQQuick

Ай бұрын

haha thanks! We are both big fans of each other I think!

@JamesQQuick

Ай бұрын

So good! Do you have a video on that?

@kizigamer6895

Ай бұрын

@@JamesQQuick why did you add I think at the last?? 😂

@kizigamer6895

Ай бұрын

@@JamesQQuick yes I also thought skeleton of that same UI would be better loading state for the UX

Very nice. Thanks!

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!

What was that snippet tool you popped up? Thanks.

Awesome content!

@JamesQQuick

Ай бұрын

THANK YOU!

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

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?

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?

@JamesQQuick

Ай бұрын

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

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?

@JamesQQuick

Ай бұрын

Yeah you could implement that functionality by using suspense yourself or just take advantage of the built-in suspense by using the loader component.

@skylerdjy

Ай бұрын

@@JamesQQuick Thank you for the clarification :). Keep up the good work!

this is what i subscribed this channel for

@JamesQQuick

Ай бұрын

Yes! Love to hear it. What else are you interested in?

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

God, I love the app router. Thanks for this video, didn't know this. You saved my booty

@JamesQQuick

Ай бұрын

haha glad to help!

Why LCP is below 2 seconds though? Is it because of the streaming?

@JamesQQuick

Ай бұрын

Yep. It can load and paint the initial html. It then streams in other data asynchronously.

@drosi1994

Ай бұрын

@@JamesQQuick Thank you, keep it up! Your content is great!

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.

💯 using server components. 🤓