Static vs Dynamic Rendering in NextJs 13

Рет қаралды 9,419

11 ай бұрын

In this video, we'll look at static vs dynamic rendering. The default strategy and how to opt into dynamic rendering for each route segment.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...

Пікірлер: 46

@sahaneakanayaka3394 10 ай бұрын

Your explanations are very clear. These are the core things that we need to know about nextjs 13. Your chanel really delivers them. Appreciate your work sir ❤❤🙏

@hamedbahram 10 ай бұрын

Glad to hear that, thank you! I appreciate it.

@dev_front 11 ай бұрын

thanks a lot Hamed you are such an amazing teacher 🌸🌸🌸🌸

@hamedbahram 11 ай бұрын

Thank you! 🤓

@jordanrodrigues1824 10 ай бұрын

Amazing content, congratz!

@hamedbahram 10 ай бұрын

Appreciate it!

@2an_sound 5 ай бұрын

thank you SO much for this lesson. Docs are somehow hard for me to understand compared to your explanation and I finally get it

@hamedbahram 5 ай бұрын

You're very welcome! Glad it was helpful!

@nwobodogeorge5370 11 ай бұрын

Thank u so much. I just subscribed to you channel.

@hamedbahram 11 ай бұрын

Glad to hear that! Welcome to the channel.

@sushantjadhav1475 11 ай бұрын

As per doc During rendering, if a dynamic function or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route For a route to be fully static, all data must be cached 1) In Video you didn't mentioned about uncached data request. 2) Could you please create examples and build application and explain how dynamic functions and cached data deciding static or dynamic 3) Also could you please explain below one? In the future, Next.js will introduce hybrid server-side rendering where layouts and pages in a route can be independently statically or dynamically rendered, instead of the whole route.

@hamedbahram 11 ай бұрын

That's right, if you change your `fetch` default behavior to not store (cache) the result, you're opting into dynamic rendering. I'll create a follow-up video where I'd build examples for this. Thanks for the suggestion. And to your last question, in the future, layouts and pages can be rendered independently from each other. Right now, if a route is dynamic, both the layout and page will be rendered dynamically.

@juanmanuelcirotorres6155 11 ай бұрын

I need a channel like this, thanks

@hamedbahram 11 ай бұрын

Glad you enjoy it!

@isaacjon 11 ай бұрын

Great channel, please do consider using code examples when your talking about those specific situation so we can also see visually what it looks like

@hamedbahram 11 ай бұрын

Will do! Thanks for the suggestions.

@Geuni620 11 ай бұрын

Thanks for the video. Thank you so much! I have a question about producing static pages. I was wondering about the difference between 'force-static' and 'error' during route segment config. Is it just a difference that the 'error' attribute pops up an error when a dynamic cache data or dynamic function is executed, and force-static returns an empty value?

@hamedbahram 11 ай бұрын

Glad it was helpful! Yes as far as I know that's the only difference between `error` and `force-static`. The documentation recommends using `error` if you want to replicate the `getStaticProps` behaviour for static site generation.

@codefinity 4 ай бұрын

Thanks!

@hamedbahram 4 ай бұрын

Appreciate that!

@27sosite73 5 ай бұрын

thank you

@hamedbahram 5 ай бұрын

You're welcome

@aniislive6800 11 ай бұрын

Can you make a video for implementing edge runtime, how to use that with next js 13

@hamedbahram 11 ай бұрын

Thanks for the suggestion. I'll have that in mind!

@hey............. 11 ай бұрын

Can you please create a video on prefetching and how to revalidate and disable different types of cache(client and server) in next.js when user switch between different pages. In my app, i am facing stale data issue. I can see in the build thag my page is dynamically rendered(using searchParamd) but still i am seeing stale dara. I am making a call in page.tsx and has revalidate set to 45 sec. Even after 45 secs, when i revisit page data is stale.

@hamedbahram 11 ай бұрын

Revalidate=45 means that after 45 seconds, if a request hits the page, NextJs would revalidate the page behind the scene while that request is still served with the stale data. It's the requests after that, which will see the fresh data.

@sushantjadhav1475 11 ай бұрын

Can it possible that page is partially static rendered and partially dynamic rendeted?

@hamedbahram 11 ай бұрын

Yes you can define caching at a fetch level different from the page. So the page can be static while a fetch request can be dynamic.

@isaacjon 11 ай бұрын

@@hamedbahramcan you show us how to do that

@hondaxblade2127 Ай бұрын

Hello sir I followed nearly every video of yours on NextJs they are really helped me tl build my dream project... Thank you 😊😊 I need your help... I'm using generateStaticParams function inside that I'm calling one of my api for generating the [productId].... working good... but the problem is my API have pagination and for page.js i use it to display the list of products and pass the 'page' param using the 'searchParam' when clicked on the Next page button. But the probelem with 'getStaticParam' is that I cannot pass the parameter to it so that it can be passed to the API to change the page and build next batch of product pages. currently I'm passing page = 1 and it is only building initial 10 pages, but I want to build more... What to do here? Please help 😣

@hamedbahram Ай бұрын

Glad you've learning from the videos. If you have access to your API you can create a function that returns all the pages instead of a paginated result or alternatively you can call your API recursively until you fetch all the pages and only then map and return the paths from the `generateStaticParams` function.

@hondaxblade2127 Ай бұрын

@@hamedbahram I'm surprised you responded that quick 🤩 I will go for the first solution u suggested. Love from INDIA 💜

@gmoniava 10 ай бұрын

Is there no difference for static and dynamic rendering for client and server components?

@hamedbahram 10 ай бұрын

Server components are rendered entirely on the server and send no JS to the browser, while the client components are pre-rendered on the server and hydrated on the client which sends JS to the browser. Now the static vs dynamic question is really about when the rendering happens, either at runtime for every request (dynamic) or at build time (static).

@gmoniava 10 ай бұрын

@@hamedbahramYes but if you look at the documentation of "Server Components" it explains when and under which conditions static and dynamic rendering happen for server components - but when you go to docs for client components, this is not explained.

@vanithb6630 9 ай бұрын

Bro I have a doubt.. while call api.. if face error how to handle it

@hamedbahram 9 ай бұрын

Can you expand on your question? Do you mean from server components?

@vanithb6630 9 ай бұрын

@@hamedbahramyes server components..

@hamedbahram 9 ай бұрын

@@vanithb6630 Well, it's upto you how you like to handle it, you can wrap the fetch inside a try catch statemet to catch the error, you can show a `notFound` page, you can show a toast notification that there is an error, you can wrap the whole route segment in `error.js` which will be an error boundary. So there are different things you can do... The simplest one is to add `error.js` file to your route segment.

@DnyaneshLohar 11 ай бұрын

Sir, can you make a video on Metadata API in nextjs..

@hamedbahram 11 ай бұрын

Absolutely! Thanks for the suggestion.

@gamerhamim9110 2 ай бұрын

is there anyone who can help me with my project i joined thos hell server i mean next js server and so on thos are hell i dont get any help from there i just need a person to help me

@hamedbahram 2 ай бұрын

What do you need help with?

@gamerhamim9110 2 ай бұрын

@@hamedbahram man iam tierd sick of this next js revalidation stuff i worked on a project for more then 2month and then when i deployed it to vercel it just cached eveyrthing i used next 14 and firebase on that project i set the cache to no store also did revalidatePath('/') but it didnt help the thing is when i use the mock api the data doesnt get cache it only heppen with the firebase code i wrote it in both way first direct in the client then in the action.ts also in the route now i decided to not go with next backend what so ever