Static vs Dynamic Rendering in NextJs 13

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.hamedbahra...

[@sahaneakanayaka3394]

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]

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

[@sushantjadhav1475]

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]

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.

[@hey.............]

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]

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]

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

[@hamedbahram]

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]

​@@hamedbahramcan you show us how to do that

[@gamerhamim9110]

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]

What do you need help with?

[@gamerhamim9110]

@@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

[@2an_sound]

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]

You're very welcome! Glad it was helpful!

[@Geuni620]

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]

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.

[@vanithb6630]

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

[@hamedbahram]

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

[@vanithb6630]

@@hamedbahramyes server components..

[@hamedbahram]

@@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.

[@aniislive6800]

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

[@hamedbahram]

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

[@isaacjon]

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]

Will do! Thanks for the suggestions.

[@DnyaneshLohar]

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

[@hamedbahram]

Absolutely! Thanks for the suggestion.

[@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 💜

[@nwobodogeorge5370]

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

[@hamedbahram]

Glad to hear that! Welcome to the channel.

[@gmoniava]

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

[@hamedbahram]

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]

@@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.

[@27sosite73]

thank you

[@hamedbahram]

You're welcome

[@codefinity]

Thanks!

[@hamedbahram]

Appreciate that!

[@juanmanuelcirotorres6155]

I need a channel like this, thanks

[@hamedbahram]

Glad you enjoy it!

[@jordanrodrigues1824]

Amazing content, congratz!

[@hamedbahram]

Appreciate it!

[@dev_front]

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

[@hamedbahram]

Thank you! 🤓

[@eniolaadejori9114]

🎉🎉

[@hamedbahram]

🫡