Next.js 13 Changed Data Fetching and Rendering... But Is It Good?
Vložit
- čas přidán 11. 07. 2024
- What's the difference between app router, page router, static site generation, static rendering, server-side rendering, dynamic rendering, incremental static regeneration, server components, client components, getStaticProps, getServerSideProps, getStaticPaths, generateStaticParams, and hydration?
📚 Materials/References:
Server & Client Components: • Everything You Need to...
👨🏻💻 Here's what you'll learn:
- What are Pages and App Router?
- What is hydration
- Rendering differences between Next.js 12 and Next.js 13
- Server and client components in Next.js 13
- How to fetch data in Next.js 12
- How to fetch data in Next.js 13
👇 Timestamps:
00:00 Intro
00:29 Rendering Basics
01:10 Pages vs App Router
01:32 Next Build
02:00 Rendering in Next.js 12
04:01 Rendering in Next.js 13
05:10 Server & Client Components
06:37 Server Components vs SSR
07:45 Fetch API Replacement
10:51 generateStaticParams
12:16 Summary - Věda a technologie
Hands down the most comprehensive next js video on this topic. Keep up the amazing content!
Wow, thanks! I really appreciate that :)
that's amazing video on next js Data Fetching and comparison between next 12 vs 13. well done. Thank you for sharing your knowledge on such a this simple and easy way
This video should be popping off.. best next13 features explanation out there .. great job, buddy.
Wow, thanks!
Best explanation of v13 changes to rendering / data fetching I've found. Please more NextJs videos :-)
Thanks, will do! More will come :)
The best NextJs video I have seen. Thank you
Thank you, I'd appreciate that a lot :)
Well done, very clear explanation
Thanks, glad you liked it :)
im still learning nextjs
your video looks interesting
saved to "watch later" thanks
Thank u so much, knowledge base is useful
Glad to hear that!
This was awesome!!
Thank you :)
No seriously, i'm working on a project right now and as a "beginner" this was probably one of the best videos i've seen in my research. I actually saved it. I would love to have you check out my project!@@CodeSnaps
appreciate the quality of the content
Using Vue currently, I'm very sure your videos will help me catch up with NextJS next time I return to using it, thanks!
Sounds great! Glad it was helpful :)
Very informative
Thanks! Glad you liked it :)
Thank you❤️🔥
Any time :)
This is great
Amazing content brooo...
Thank you so much :)
Very helpful explanation !!
Is there a way to mimic getInitialProps in next 13?
Fantastic video explaining these confusing differences! Question regarding ISG in Next.js 13 with static paths: so you can add the revalidate parameter to the fetch call in getPost, and this makes sure that any update to a particular post gets rebuilt, but what about the fetch call inside the generateStaticParams? Would that also need a revalidate param in order to make sure that after adding a new post to the list, its id gets added to the static list of paths?
When you update a post from your database or through a CMS, generateStaticParams is not called again. By default, dynamic segments not included in generateStaticParams are generated on demand. This means that the data is also cached. You can disable this by exporting "export const dynamicParams = false" in your page.js, layout.js or route.js file. It's set to true by default. Exporting it to false will return 404 for posts that were not generated statically at build time. So it's best to leave it set to true and not export it. This will eliminate the need to rebuild your site, which is the only way to call generateStaticParams again.
To show the updated version of your post, you can use time or on-demand revalidation. Time revalidation is as simple as adding the revalidate option to your fetch function like this "fetch('...', { next: { revalidate: 3600 } })". The value is in milliseconds. On-demand revalidation can be done by path (revalidatePath) or by cache tag (revalidateTag) inside a route handler or server action. Here's it's best to check the docs for implementation, but one example would be to use webhooks if you use a CMS and call the route handler to revalidate the path. generateStaticParams works like getStaticPaths, so you could look for how revalidation was implemented with getStaticPaths to get an idea of a good workflow. Hope this helps :)
@@CodeSnaps Thanks for the comprehensive response! In the second paragraph, you are discussing the revalidation parameter for the getPost function, but what about the fetch call from the generateStaticParams? Does that support the revalidate param as well with the same effect? (i.e., rebuild the static paths every N seconds)
Great videos, thank you! Can you make video how to do a list products page which has "Load more" button, I don't know what is the best way to do that with Nextjs 13, I don't really want to use client component?
Sure, but if you want to fetch more todos in a todo list, you'll need to use a client component. However, the first, let's say 20 todos can be fetched via the server using server components. Then when the user clicks "Load more", you use a client component to show more todos. This way you can use both server components and client components at the same time.
Hey man, that was a great and very informative explanation, but I wondered can we cache the request time data like can we cache the data sent from the server so may be we can have faster performance and also just changing the cache option we are changing whether the site is rendered on build time (just once) or page is served from the server or request time(on every page request), right?
I hope I understood your questions correctly. The data that is fetched from the server is automatically cached, even with revalidation, because it shows the cached data first, and after revalidation it sets a new cache. The data is cached once at build time, but if you add revalidation with something like "fetch('...', { next: { revalidate: 3600 } })", then the data is cached again after revalidation. This means that we always have better performance because the data is fetched from the server and cached. If you use something like "fetch('...', { cache: 'no-store' })", then the data is not cached, but fetched on every single request. Just using fetch alone with no other options (default) will automatically cache it once per build time. It won't fetch it again, you need to revalidate for that. Hope that helps!
this is awesome!. I want to ask, is generateStaticParams function revalidate on new data? or we should add params next{revalidate} on function enerateStaticParams ?
Thank you very much! So generateStaticParams doesn't revalidate for new data. However, you can add 'next: { revalidate: X }' to the fetch function where, for example, you fetch a single post, not to the fetch function inside generateStaticParams. So add 'fetch(URL, { next: { revalidate: 3600 } })' to getPost() and not inside generateStaticParams(). This only works with the native fetch function. If you are using libraries like axios, then add 'export const revalidate = X' somewhere on the page where you call generateStaticParams. Hope this helps!
@@CodeSnaps Oh I see,thank You so much. I just know the export const revalidate = X for another fecthing data like axios.Its very clear with this explanation.Thanks brother👍
Can you do a video on React Query in Next 13+ thank you!
Sure thing! It's a good idea, thanks :)
If I'm not mistaken we have no possibility to use react query inside the server component we can use it if we add "use client'' on the top of the page component. Will be great to have the possibility to use react query inside server page component(.
Because it's very sad to use native fetch we will have no isLoading, isError and etc...