Excited to reupdate the big Fullstack React Course. Hope this video helped understand the differences between how React and Next and React Query handle data fetching and caching!
Could you please make video on travel website hero section, including hotel flight tours and check in and check out input, with transition,, when press on hotel come all fields for hotel booking and so on....
*Edit: Just know that the course is absolute trash.* Not even when making a "premium course" is this guy able to sit down and get his shit together, he continually makes bullshit mistakes which just go on to become very confusing because of Teachable video player design (the top area is feathered:hover for some stupid reason) As for the course material in itself, don't expect much, I imagine it's 'okay' for someone who doesn't know anything about react or FSD, but in my case where I just wanted to learn Next it wasn't very helpful, especially not at that price. You will seriously find better on udemy for under 10€, or even free on youtube. I asked for a refund the day after purchasing, says it could take up to 3 days for him to get back. It's 11 days have now passed without an answer. Luckily I contacted Teachable as a "receipt for my request" as I have a feeling Ed is the type of guy to pull a "ohno you didn't ask on time" This mf needs some Bataie De Strada™
Perfect! You've helped me eleviate a BIG headache with this tut - thank you 🙏 Had a lot of problems and inconsistencies with data revalidation in app router and at the end it seems that tanstack query won't be ditched for server actions anytime soon. For anyone looking into the new revalidatePath / revalidateTag functions - they aren't working as intended from its core, and if it were - you can't specify only 1 dynamic path (like a specific slug), you have to revalidate ALL dynamic paths (there's numerous open issues on that and other opinionated logic behind it)
This is why the app directory in Next13 just isn't ready for primetime until they figure out the mutation story. Funny enough, if you use something like Supabase and its live subscription feature for DB queries, you get instant updates without all of that react query nonsense. React query has never had a strong implementation for SSR, it has always felt like an afterthought. Which is why I don't bother using it unless I'm in a SPA doing rendering only client side.
I noticed server actions don't show the requests on the network tab.. and we probably can only see the data on the terminal, for cases where you are debugging in production and the data returned on the api call changes (or fails) how do you get to debug this situation?
It takes a lot of efforts and codes to just delete data in both ui and server with React Query, no one would do this in real life app, after fetch posts and server render the page, I would save the posts into a global variable with state management like Zustand and simply update the ui, quick and simple only takes on few lines of code, I appreciate Ed demo how Next.js 13.2 evolves and glad to know how it works, thank you 😃
Even I've done the same. 👍 I'm initially storing the data on a global state management variable. Later when any CRUD operation is done, I'm simply making that specific API call + updating my state management accordingly. I do feels it's redundant since we are doing it twice (once for API, once for FE side). Hope these guys figure something out!
Caching is pain in next.js. No way to clear router cache except for router.refresh() - which kinda beats the purpose of server components. Next.js caches so insanely in production tried everything but no cache invalidation property seems to work. I also find docs confusing. They interchangeably use terms like dynamic routes, dynamic rendering and many more Link prefetching also doesn't work as expected with dynamic rendering in production build. As per them it should be cleared after 30secs but it doesn't.
"Hello, teacher. I watched your tutorial video on RUclips about using Next.js 13, Prisma, and TanStackQuery, and I have two questions on my mind. First, we fetch data using Prisma and the Prisma client. However, in a client-side rendered component, when trying to use React Query and passing the Prisma client to the queryFn, it doesn't seem possible to do so. You used a fetch operation in the queryFn, so does this mean we must fetch data from an API in this case? Secondly, we used React Query in the page component, but how can we use it in a component that is three or four levels down the component tree?"
53:03 the useMutations onError uses the same context from onMutate so it should be filtered? How is it not filtered when you queryClient.setQueryData to context.previousPosts? Does any 1 know?
Haven't explored nextjs properly yet, but can't we use RTK query with next js??? RTK query with react js works very fine compared to this gruesome configuration of react query+ next js
you should focus on learning react & javascript/node basics first. After MERN you can move on to NextJs. NextJs uses react. Prisma is an ORM to work with relational databases. If you're already learning mongo then keep learning that and then you can learn a relational database.
So everytime i need to share state data with many oher components, i gonna have to fetch data again and again ?.... this "React query", makes things very complicated and confusing !! 😯😯
Using something like jotai for simple global states makes it easy to just query once and access the relevant state data in all the different components.
What an absolute shambles. Workaround, bugs, undocumented and unworkable code. All to render some HTML on a page after obtaining some data. It’s total nonsense and I’ll thought through. Appreciate you figuring it out but front end React is a mess. It quickly becomes unmaintainable for other devs to read and clearly see what it’s doing and when.
Shout out to the man ! But I don't know why, when i refresh the page, i got the old data for a few seconds, if anyone have an idea. EDIT : i've found the "issue". i use revalitdate 0. Am i crazy ? const response = await fetch(`${process.env.ENDPOINT}/todos`, { method: 'GET', headers: { 'content-type': 'application/json' }, next: { revalidate: 0 }, });
Excited to reupdate the big Fullstack React Course.
Hope this video helped understand the differences between how React and Next and React Query handle data fetching and caching!
Could you please make video on travel website hero section, including hotel flight tours and check in and check out input, with transition,, when press on hotel come all fields for hotel booking and so on....
Nice to see you making all these updated Content!! YOU ARE THE BEST!!
*Edit: Just know that the course is absolute trash.*
Not even when making a "premium course" is this guy able to sit down and get his shit together, he continually makes bullshit mistakes which just go on to become very confusing because of Teachable video player design (the top area is feathered:hover for some stupid reason)
As for the course material in itself, don't expect much, I imagine it's 'okay' for someone who doesn't know anything about react or FSD, but in my case where I just wanted to learn Next it wasn't very helpful, especially not at that price. You will seriously find better on udemy for under 10€, or even free on youtube.
I asked for a refund the day after purchasing, says it could take up to 3 days for him to get back.
It's 11 days have now passed without an answer. Luckily I contacted Teachable as a "receipt for my request" as I have a feeling Ed is the type of guy to pull a "ohno you didn't ask on time"
This mf needs some Bataie De Strada™
@@bravefastrabbit770 Go with Next 13.2, it makes life so much easier 😘
How did you add like button in ur pervious data.
Nice to see you making all these updated Content!! YOU ARE THE BEST!!
Perfect! You've helped me eleviate a BIG headache with this tut - thank you 🙏
Had a lot of problems and inconsistencies with data revalidation in app router and at the end it seems that tanstack query won't be ditched for server actions anytime soon.
For anyone looking into the new revalidatePath / revalidateTag functions - they aren't working as intended from its core, and if it were - you can't specify only 1 dynamic path (like a specific slug), you have to revalidate ALL dynamic paths (there's numerous open issues on that and other opinionated logic behind it)
I like the fact that you convey the feeling a lot of us have about all the lingo in use right now , keep the good work 🚀
🙌
This is why the app directory in Next13 just isn't ready for primetime until they figure out the mutation story. Funny enough, if you use something like Supabase and its live subscription feature for DB queries, you get instant updates without all of that react query nonsense. React query has never had a strong implementation for SSR, it has always felt like an afterthought. Which is why I don't bother using it unless I'm in a SPA doing rendering only client side.
True
Love your videos ❤
Keep ‘em coming!
I noticed server actions don't show the requests on the network tab.. and we probably can only see the data on the terminal, for cases where you are debugging in production and the data returned on the api call changes (or fails) how do you get to debug this situation?
It takes a lot of efforts and codes to just delete data in both ui and server with React Query, no one would do this in real life app, after fetch posts and server render the page, I would save the posts into a global variable with state management like Zustand and simply update the ui, quick and simple only takes on few lines of code, I appreciate Ed demo how Next.js 13.2 evolves and glad to know how it works, thank you 😃
Hello, how to keep the data fresh after saving the server data to Zustand?
Even I've done the same. 👍
I'm initially storing the data on a global state management variable. Later when any CRUD operation is done, I'm simply making that specific API call + updating my state management accordingly.
I do feels it's redundant since we are doing it twice (once for API, once for FE side). Hope these guys figure something out!
I too feel the setup for react query to be too buggy and complicated for a simple task. Will try out your method.
please do the zustand / cross state management between server and client components. it's driving me crazy
waiting for zustand and can we use one of them react query or zustand or they both work together
Hi,
Thanks for your efforts.
Is SSR streaming also covered in this?
Caching is pain in next.js. No way to clear router cache except for router.refresh() - which kinda beats the purpose of server components. Next.js caches so insanely in production tried everything but no cache invalidation property seems to work.
I also find docs confusing. They interchangeably use terms like dynamic routes, dynamic rendering and many more
Link prefetching also doesn't work as expected with dynamic rendering in production build. As per them it should be cleared after 30secs but it doesn't.
"Hello, teacher. I watched your tutorial video on RUclips about using Next.js 13, Prisma, and TanStackQuery, and I have two questions on my mind. First, we fetch data using Prisma and the Prisma client. However, in a client-side rendered component, when trying to use React Query and passing the Prisma client to the queryFn, it doesn't seem possible to do so. You used a fetch operation in the queryFn, so does this mean we must fetch data from an API in this case?
Secondly, we used React Query in the page component, but how can we use it in a component that is three or four levels down the component tree?"
Which theme you using ?
It's Community Material Theme Darker
53:03 the useMutations onError uses the same context from onMutate so it should be filtered?
How is it not filtered when you queryClient.setQueryData to context.previousPosts?
Does any 1 know?
great video
Can you make a video like this for page routing too?
Good Job
Haven't explored nextjs properly yet, but can't we use RTK query with next js??? RTK query with react js works very fine compared to this gruesome configuration of react query+ next js
Can you please make a video for logic building for react💜
You should use SWR instead of React Query. It's built by Vercel and the Optimistic UI update is way easier and cleaner to use.
Dude your comment made me look into SWR. I was using RTK query previously. SWR is so much easier syntax-wise.
Super Cool
Hi I have a quetion should I first learn mern stack then t3 stack (next,prisma,postgrass etc) or what kindly guide me I am very confused.
you should focus on learning react & javascript/node basics first. After MERN you can move on to NextJs.
NextJs uses react. Prisma is an ORM to work with relational databases. If you're already learning mongo then keep learning that and then you can learn a relational database.
@@cyberducc thank you
One of Big Fn
In my age, I need to look the videos twice. It's always a fun atmosphere here...
I have a much simpler solution to handle Sever&Client state. Would love to show you how i do it, maybe you could do a video about it...
what's that??
can u make next 13 typescript tailwind project with fetchAPI?
thanks
Isn't nextjs is better option instead of using this?
Why is my first load js around 360kb when using react query?
Hey Hey 😸👋
So everytime i need to share state data with many oher components, i gonna have to fetch data again and again ?.... this "React query", makes things very complicated and confusing !! 😯😯
Using something like jotai for simple global states makes it easy to just query once and access the relevant state data in all the different components.
09:39 Doesn't sound like my phone 😸
This will chage soon. Until they solves this out, I will use client side fetching with tanstack with a loading spinner.
Where are you that had sun? I’m in Poland and haven’t seen the sun in months 😅
Hello! I have trouble with a code in your course on Udemy. I sent you a message last week. Hanna Fleming
please what vscode theme is this
What an absolute shambles. Workaround, bugs, undocumented and unworkable code. All to render some HTML on a page after obtaining some data. It’s total nonsense and I’ll thought through. Appreciate you figuring it out but front end React is a mess. It quickly becomes unmaintainable for other devs to read and clearly see what it’s doing and when.
Found the developer using Laravel 😓
You can just say you like Angular more.
@@codernerd7076 absolutely a WordPress designer
@@therealdevopsintern was hoping those no longer existed 😔
I agree with @DauntingGecko !
Yipiiiii
is next 13 stable ?
did I just delete it?
Don't tell anyone 😂😂
32:37
this is like a horror movie!
I think you are just joking all the time in the lesson
Shout out to the man !
But I don't know why, when i refresh the page, i got the old data for a few seconds, if anyone have an idea.
EDIT : i've found the "issue". i use revalitdate 0. Am i crazy ?
const response = await fetch(`${process.env.ENDPOINT}/todos`, {
method: 'GET',
headers: { 'content-type': 'application/json' },
next: { revalidate: 0 },
});