I absolutely love your content Nextjs is easily one of the most in demand tech currently and you're providing one of most clear and concise resources for learning it all the way from the basics to the more advanced topics I hope your channel continues to grow, you deserve every success
Nice explanation, so if you have similar code in two different pages that share the same parent folder, you can extract that code into a common template and put it in the parent folder. It can also provide a client wrapping mechanism to your nested server pages!
Yes, exactly! You can accomplish that with both `layout` and `template`. The difference is `layout` doesn't re-render on page navigations whereas `template` does.
So what's the purpose of having a layout with a "use client"? Anytime someone wants to use "use client' he can right away use a template instead. And also, why would someone use template without 'use client"? Any case will always use "use client".? I'm a bit confused.
Typically your layout is a server component that gets rendered once and remains the same when user navigates. The template on the hand will re-render every time because it uses a `key` prop. The template doesn't need to be a client component necessarily. I turned it into a client component in this example because I was using framer motion, but you don't need to.
Hi, thanks for the video. I was trying to use template "server side" but unfortunatly when you navigate with LInk component, the template it seems no refresh some other ""server side" component inside. Why? Thanks for the answer.
The template itself would re-render on every navigation but the server components inside are cached by default. There are different ways to opt your page components into dynamic rendering, but the easiest way is to use the `noStore` function. You can read about it here → nextjs.org/docs/app/api-reference/functions/unstable_noStore
so , we should use template to add exit route animations i tried it but it dosen't work what key should i pass to AnimatePresence and Thanks hamed for your amazing content
Yeah when I switch screens the mouse hides. I'll have to remember to click on tabs before pointing at different things on the page. Thanks for the feedback.
Loving your videos, great content and well explained. Have a question, if you convert the template or the layout into a client component will all the childrens be client components too?
Thank! Glad to hear that. Re your question: only if you import a server component inside a client component will they turn into client components. You can pass server components as children as I did in the video without effecting the server-client boundary. Let me know if that's clear.
Not a straight forward way to do that, but you don't need to pass props, just re-fetch your data on the page as well, and React will de-duplicate the request.
@@hamedbahram templates document the use of exit animations but framer motions Animate Presence doesn't work with this because page is not the direct ancestor of the template
@@SanderCokart That's right. I just tested this, and while the exit navigation doesn't run, you can still animate the page. I changed the `main` tag that wraps the page in my template to `motion.main`
