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

Hands down the most comprehensive next js video on this topic. Keep up the amazing content!

@CodeSnaps

11 ай бұрын

Wow, thanks! I really appreciate that :)

im still learning nextjs your video looks interesting saved to "watch later" thanks

Best explanation of v13 changes to rendering / data fetching I've found. Please more NextJs videos :-)

@CodeSnaps

10 ай бұрын

Thanks, will do! More will come :)

This video should be popping off.. best next13 features explanation out there .. great job, buddy.

@CodeSnaps

9 ай бұрын

Wow, thanks!

The best NextJs video I have seen. Thank you

@CodeSnaps

10 ай бұрын

Thank you, I'd appreciate that a lot :)

Well done, very clear explanation

@CodeSnaps

11 ай бұрын

Thanks, glad you liked it :)

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!

@CodeSnaps

11 ай бұрын

Sounds great! Glad it was helpful :)

Thank u so much, knowledge base is useful

@CodeSnaps

9 ай бұрын

Glad to hear that!

This was awesome!!

@CodeSnaps

11 ай бұрын

Thank you :)

@trinizone1

11 ай бұрын

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

Very informative

@CodeSnaps

11 ай бұрын

Thanks! Glad you liked it :)

Very helpful explanation !! Is there a way to mimic getInitialProps in next 13?

Thank you❤️🔥

@CodeSnaps

9 ай бұрын

Any time :)

This is great

Amazing content brooo...

@CodeSnaps

11 ай бұрын

Thank you so much :)

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?

@CodeSnaps

9 ай бұрын

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 :)

@bogdanalexandru5071

9 ай бұрын

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

@CodeSnaps

10 ай бұрын

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?

@CodeSnaps

10 ай бұрын

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 ?

@CodeSnaps

10 ай бұрын

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!

@davidirawan3083

10 ай бұрын

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

@CodeSnaps

10 ай бұрын

Sure thing! It's a good idea, thanks :)

@ProWichDoctor

10 ай бұрын

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