Brilliant video - this really explains a lot. I love the way you started by trimming out all the crud, and the pace with which you move through the demo. Very helpful! One question: In your VSCode you are getting popups telling you what attributes you can choose from (e.g. 36:05). What VSCode extension are you using to give you that?
thankyou this was so much helpful and eazy to understand ! can you please make 1 video about multi-stepper form with input , select , datepicker and radiobuttons with react-hook form and zod or yup validations and percentage styles ..
@@codegenix i just mentioned those things because they are pain in the ass for everyone when dealing with client projects lol thankyou thatsgreat , will be waiting for the tutorial 😃
3:15 create components folder inside app dir doesn't affect the route? is there any convention for that with _ at first letter like _components? i'm new so i don't understand
It is a good question. The components folder does not affect the routes (as long as there is no page.tsx or layout.tsx or any other next js preserved components) . It is only for better project structure and more readable code. The _ underscore was for previous next version (12 and below). Don't mix them up❤️😉
You made it easier for understanding definitely. I just have one question, all the GET methods will be in the fetcher functions, and so we don't need a try...catch and nothing related when only getting results? And can we rely on swr for doing all this process for us?
Glad you like them. The next one is React Hook Form + Zod + MUI full course which I'm gonna upload it in a few hours. It is a 4 hours full course, completely FREE!
Using a provider with the 'use client' directive does not mean you are gonna lose SSR advantages. The hydration comes into the play in these situations.
So i wrote this export function usePosts(pageIndex) { return useSWR(`/api/posts?_limit=1&_page=${pageIndex}`); }, but it returns everything from the backend yet I gave it a limit. do I have to the limits on the backend?
@tnnz9920 You can handle it via fetcher directly in the fetcher file or passing arguments while using useSWR hook then access those parameters in the fetcher.
Which is best react query or swr ? I am currently working on my capstone project which needs a good fetching, pooling, kind of realtime updates. For state management i am using recoil. I am confused between choosing react query and swr. Can you guide me please
Hey I learnt Tanstack Query from your video, but I cannot get it right with react-error-boundary and React suspense. It's a bit of work to always do if (isLoading) or if (isError). Having ErrorBoundary and Suspense make it a lot easier. I have tried the example of tanstack query docs for the same but couldn't get it right.
When a query function results to an error, it tries the query 3 times to get it right finally. If it could not get it right, the data of the query will be undefined through out your project. But you can fix this problem before production. This should not be happened when real user is interacting with your application. When a mutation function results to an error, you can handle it in the onError callback in the useMutation hook. For example you can show a popup message that "The product cannot be added to your cart because...". I think there is no need for ErrorBoundary in this situation. Can you give me an example that when the ErrorBoundary is required?
@@codegenix for example when getting data if any error occurs even after 3 tries, then I can contain the error of the component and reset the error or give it a try again button. Whats your suggestion?
You can do something like this. useEffect(() => { if (query.error) { // do something } }, [query.error]); also you have access to failureCount by query.failureCount. You can do whatever you want with the error
Tell me if I'm wrong. If you use "use client" in parent component doesn't it make all of the children use client component and not server component, so that means everything is happening on client side. Ps. great video.
I'm really glad you liked it. However, it's important to note that wrapping your entire project in an "use client" directive does not necessarily mean that your whole project will run on the client. You can still execute commands on the server even when your app is wrapped in a "use client" provider. As long as you don't use the "use client" directive at the top of your file, it is considered a React Server Component (RSC), and you can run sensitive commands or communicate with your database in that component. You can test it for yourself by logging a test value. If the value is logged on the server, it means that the code is run on the server and also the same for client.
I'm glad that you learnt something❤️ SWR is more suitable for smaller projects. React query is suitable for large scale applications. You must know the requirements of the project before you decide between these two options.
I remembered that you also recommended swr on the tanstack video😅. Sure my friend. I have a question. Do you think it is better to combine hook form tutorial with zod? Or just pure hook form tutorial?
Thanks for you comment🙏. If you want to fetch data at client level in Next.js application, the Next.js docs suggest that to use SWR or tanstack query library which they are not implemented by default and you must install them as third party libraries.
@@codegenix yes I know that. They also suggested/recommended to fetch data on the server side and pass the data to the client from the server side which helps with SEO and other issues especially if one is using the app router...
Yes, exactly. The priority must be to fetch data from the server, create the page, and then pass the page to the user. Imagine an e-commerce website where each page contains product prices, features, and introductions. SEO is very important for each page, and the page must be created on the server for optimal performance. However, for example, imagine if the user wants to add a product to their shopping cart. The user expects the shopping cart to be seamlessly updated when the item is added or removed (including mounting and unmounting animations, which are not possible on the server). This scenario can also occur on the server with cache validation, but it is not as user-friendly as client fetching and invalidation. The interactions for these types of scenarios are too high. Here, the user experience is more important than SEO. Sometimes, we must strike a balance between SEO and UX. Additionally, imagine an ERP dashboard where SEO is not important at all. It is very difficult to always fetch data on the server and pass the page to the user. As a developer, you need to handle the data flow within the application with great care, as handling server fetching and invalidation is very challenging, and you don't have much control over your data while using server data fetching.
I checked it, I don't think there is any thing wrong with the snippet that you just provided. Would you provide me more information about the problem and the errors?
Between SWR library, React Query or other server state management libraries, what is your choice and why?
I was too lost to use this library but this tutorial fit me like a glove, thank you very much
Glad I could help!
yeah me too
Glad you think so!
Brilliant video - this really explains a lot. I love the way you started by trimming out all the crud, and the pace with which you move through the demo. Very helpful!
One question: In your VSCode you are getting popups telling you what attributes you can choose from (e.g. 36:05). What VSCode extension are you using to give you that?
@intigr8 Thanks so much! To open up the intellisense popups just hit "ctrl + space".
Thank you sir I asked for this in your last video 🙌🙏
Most welcome 😊❤️
I can't thank you enough. Thank you for this great tutorial on swr
🥰🥰
I'm really happy that you liked it! Thanks alot
Nice video. Any recommendations for handling session or other resources that can’t have a Get
You're very welcome. What do you mean? Would you explain more?
thankyou this was so much helpful and eazy to understand !
can you please make 1 video about multi-stepper form with input , select , datepicker and radiobuttons with react-hook form and zod or yup validations and percentage styles ..
I really appreciate your positive energy🙏
How did you read my mind? 😅
I am currently working on a tutorial about the things that you just mentioned😅.
@@codegenix i just mentioned those things because they are pain in the ass for everyone when dealing with client projects lol
thankyou thatsgreat , will be waiting for the tutorial 😃
Sure😊, I am planning the new tutorial.
very succint & easy to follow. Thank you 😃
Glad you enjoyed it!
3:15 create components folder inside app dir doesn't affect the route? is there any convention for that with _ at first letter like _components? i'm new so i don't understand
It is a good question. The components folder does not affect the routes (as long as there is no page.tsx or layout.tsx or any other next js preserved components) . It is only for better project structure and more readable code.
The _ underscore was for previous next version (12 and below). Don't mix them up❤️😉
I want to start a new project, and I would like an example of a project structure
You made it easier for understanding definitely. I just have one question, all the GET methods will be in the fetcher functions, and so we don't need a try...catch and nothing related when only getting results? And can we rely on swr for doing all this process for us?
@jasontricolor2978 Yes, exactly
@@codegenix Thank you so much!
Thank you so much. If possible, can you make a video about AWS that we should learn as web developer?
You're very welcome. AWS and almost every provider is banned in my country and I cannot access them
You make some amazing videos. When are the new ones coming out?
Glad you like them. The next one is React Hook Form + Zod + MUI full course which I'm gonna upload it in a few hours. It is a 4 hours full course, completely FREE!
When wrapping children in a Provider component, which is a client component, the SSR advantage is lost, right?
Using a provider with the 'use client' directive does not mean you are gonna lose SSR advantages. The hydration comes into the play in these situations.
Thanks ❤🎉
You're welcome 😊
Awesome bro
Thank you, I will
So i wrote this export function usePosts(pageIndex) {
return useSWR(`/api/posts?_limit=1&_page=${pageIndex}`);
}, but it returns everything from the backend yet I gave it a limit. do I have to the limits on the backend?
What backend are you using? Are you using json-server?
The perfect video, thanks too much
Glad you liked it!
what if the GET method has header authorization how to handle them?
@tnnz9920 You can handle it via fetcher directly in the fetcher file or passing arguments while using useSWR hook then access those parameters in the fetcher.
Which is best react query or swr ? I am currently working on my capstone project which needs a good fetching, pooling, kind of realtime updates. For state management i am using recoil. I am confused between choosing react query and swr.
Can you guide me please
@user-ix5rq4wm8x React query is more powerful for complicated scenarios. SWR is suitable for small to medium size projects.
Hey I learnt Tanstack Query from your video, but I cannot get it right with react-error-boundary and React suspense. It's a bit of work to always do if (isLoading) or if (isError). Having ErrorBoundary and Suspense make it a lot easier.
I have tried the example of tanstack query docs for the same but couldn't get it right.
When a query function results to an error, it tries the query 3 times to get it right finally. If it could not get it right, the data of the query will be undefined through out your project. But you can fix this problem before production. This should not be happened when real user is interacting with your application.
When a mutation function results to an error, you can handle it in the onError callback in the useMutation hook. For example you can show a popup message that "The product cannot be added to your cart because...". I think there is no need for ErrorBoundary in this situation. Can you give me an example that when the ErrorBoundary is required?
@@codegenix for example when getting data if any error occurs even after 3 tries, then I can contain the error of the component and reset the error or give it a try again button. Whats your suggestion?
You can do something like this.
useEffect(() => {
if (query.error) {
// do something
}
}, [query.error]);
also you have access to failureCount by query.failureCount. You can do whatever you want with the error
@@codegenix ok, will try it out
Hey Code Genix, are you Iranian? Btw, loved your tutorials...
Are sotoonam. Fadat sham❤️
Thank you very much for this video. May I ask where are you from?
Are dadash chera nemishe😂❤️. Iran karaj
🤣🤣 damet garm movafagh bashi
You're perfect🔥🔥
Thanks!
well done
I'm glad you liked it.
Thank u soo much for this!
Glad you liked it
Tell me if I'm wrong. If you use "use client" in parent component doesn't it make all of the children use client component and not server component, so that means everything is happening on client side. Ps. great video.
I'm really glad you liked it. However, it's important to note that wrapping your entire project in an "use client" directive does not necessarily mean that your whole project will run on the client. You can still execute commands on the server even when your app is wrapped in a "use client" provider. As long as you don't use the "use client" directive at the top of your file, it is considered a React Server Component (RSC), and you can run sensitive commands or communicate with your database in that component. You can test it for yourself by logging a test value. If the value is logged on the server, it means that the code is run on the server and also the same for client.
I have a question, I can already use React Query which I learned from your video, do I have to learn SWR
I'm glad that you learnt something❤️
SWR is more suitable for smaller projects. React query is suitable for large scale applications. You must know the requirements of the project before you decide between these two options.
Extremely great. Thanks a ton!
You're very welcome!
Nice bro can u make long project use nextjs ,swr and something
Yeah sure👍
Something = Inngest (event driven architect)
Thanks man.
I have a question what's coming next on your channel.
I have no idea. The swr tutorial was the idea of my subscribers. You can also suggest the next video.
I have react hook form on my mind.
Yep that's good idea👍
I remembered that you also recommended swr on the tanstack video😅. Sure my friend. I have a question. Do you think it is better to combine hook form tutorial with zod? Or just pure hook form tutorial?
Yes it is better to combine
@@codegenix
thank you
You're welcome
ممنون
You're most welcome!
isnt SWR baked into next js from since 13+ by default?
Thanks for you comment🙏. If you want to fetch data at client level in Next.js application, the Next.js docs suggest that to use SWR or tanstack query library which they are not implemented by default and you must install them as third party libraries.
@@codegenix yes I know that. They also suggested/recommended to fetch data on the server side and pass the data to the client from the server side which helps with SEO and other issues especially if one is using the app router...
Yes, exactly. The priority must be to fetch data from the server, create the page, and then pass the page to the user. Imagine an e-commerce website where each page contains product prices, features, and introductions. SEO is very important for each page, and the page must be created on the server for optimal performance.
However, for example, imagine if the user wants to add a product to their shopping cart. The user expects the shopping cart to be seamlessly updated when the item is added or removed (including mounting and unmounting animations, which are not possible on the server). This scenario can also occur on the server with cache validation, but it is not as user-friendly as client fetching and invalidation.
The interactions for these types of scenarios are too high. Here, the user experience is more important than SEO. Sometimes, we must strike a balance between SEO and UX.
Additionally, imagine an ERP dashboard where SEO is not important at all. It is very difficult to always fetch data on the server and pass the page to the user. As a developer, you need to handle the data flow within the application with great care, as handling server fetching and invalidation is very challenging, and you don't have much control over your data while using server data fetching.
That's great.
Glad it was helpful!
Sir, do u have any discord channel?
Soon...
mashtio o portaradar
Fadaaaa❤️
You forget to talk about cache, but anyway, excelent video
You're right!
🎉, im a first?
Yes my dear friend😁
last infinite scrolling code is invaild
maybe.....
incorret code is this code?
export function useTodos() {
const getKey = (pageIndex: number, previousPageData: Todo[]) => {
if (previousPageData && !previousPageData.length) return null;
return `/todos?_limit=3&_page=${pageIndex + 1}`;
};
return useSWRInfinite(getKey);
}
I checked it, I don't think there is any thing wrong with the snippet that you just provided. Would you provide me more information about the problem and the errors?
@@codegenix I'm so sorry, it just my mistake. Thank you for your great SWR Tutorial!!!
You're very welcome