Partial Prerendering in NextJs 14
Vložit
- čas přidán 2. 08. 2024
- This video will examine partial prerendering in NextJs 14, which combines ultra-quick static edge delivery with fully dynamic capabilities at the component level.
👉🏼 New courses
→ www.hamedbahram.io/courses
👉🏼 NextJs docs
→ nextjs.org/docs
👉🏼 Partial prerendering example
→ www.partialprerendering.com/
👉🏼 Work with me
→ www.hamedbahram.io/hire
Chapters
0:00 Intro
3:30 Convention
5:46 Caveats
8:10 Examples
9:48 Recap - Věda a technologie
U just dropped this Hamed right when I am giving myself a Sunday to play with server action fetching and pre-rendering 💥🔥 🎉
There you have it Matt! Let's go!
I thought we had this already. Right now I could wrap a component with suspense and this feature would be replicated. What am I missing?
We have the `Suspense` but currently your entire route is either static or dynamic. Whereas in partial prerendering you can break one route into static and dynamic parts.
@@hamedbahramoooo9ooo9ooo😊ooo😊😊😊😊😊😊😊😊😊oo😊999😊
😅
how to configure the app to send the static part and static pages from a CDN but the dynamic parts from a dynamic server?
While this is experimental, I've explained how to do it in the video.
Hello I am getting this error while I am bulding my nextjs project how can I fix it:
Error occurred prerendering page "/dashboard".
Check if you installed the `next@canary` version, and wrapped your dynamic component with Suspense, and lastly that you're not using the edge runtime.
Isnt this what we already do with streaming ?
I am failing to see the fundamental difference here ?
Currently we're at the route level, partial prerendering is at the component level.
@@hamedbahram , I have the same doubt , don't we use loading.tsx for route level fallback , and for component level we use Suspense . How partial pre-rendering is different
@@hamedbahram i still fail to see what you mean by that ? in order for a component to render it should be inside the tree of that route some where correct ? if its a server component fetching something asynchronously we could suspend it do you mean to say that if i am using a 'use client' directive in a client component and if i am performing some api call inside my useEffect() i can suspend that as well ? i think it would be best if you made a video where you could clearly showcase the difference between streaming RSC vs PPR ??
@@inderjotsingh5868 partial prerendring is blend of both static and dynamic rendring while "concept of streaming" belongs to only dynamic rendring.The concept of streaming with static rendring is equal to partial prerendring introduced by NEXT 14
@@shahidmughal8466 thanks bro,
Now my whole misconceptions is cleared about partial prerendering.
Earlier i used to think that nature of rendering is component based . But I was wrong it is based on all the components we are going to use in the page . If we are using dynamic elements in any component within the page then entire page will be shifted to dynamic rendering.
But with partial prerendering nature of rendering is component based. So cool and performant.
Thanks 🙏
Sir why we can't use sockets in nextjs. can you please make a video on nextjs limitations ?
If you're deploying your Next.js application to a serverless environment like Vercel then you can't use web sockets due to the time limit of serverless functions
That's right! Thanks for the reponse!
@@darrenpierre9903 alright got it.
Your hand watch is cool. Can you give me the link for your watch😅... And great tutorial.
Thanks, I appreciate that.
'edge cdn' = a vercel feature? or is this something easily replicated on a self hosted platform?
The edge cdn is not a vercel feature, you can use cloudflare for example. The part I'm not sure about yet is how to set it up with PPR. We'd have to wait and see as this feature matures into stability.
@@hamedbahram ah, yeah i just thought it might have indicated it was not possible to self host. will give it a try :)
Bonjour monsieur, j'espère que vous allez bien. je suis entrain de chercher une bibliothèque pour m'aider à fait de OTP sur téléphone mobile via SMS avec NextJS, pouvez vous fait du contenu dessus svp 😢😢
Absolutely! You can use Clerk to implement OTP. I'll have content on creating this using nextauth as well.
@@hamedbahram je suis au courant pour Clerk. Mais je me demande si il ont juste la partie OTP Mobile seule ou bien il faut intégrer tout l'authentification.
Je veut éviter clerk parceque j'ai déjà utilisé nextAuth
Bjh Yoo on
Not sure what that means.