I have a question, how did you pass the initial data to your useQuery, as I am using trpc, but I cannot do that and the refetchinterval, ? can you explain it bit , it will be very help full . Thank you
@developedbyed You are great man, i have implemented this server side prefetching after watching your after your video. But i prefetch on on my layout component 😅
For polling you can also do Server-Sent Events (SSE). The server sends the data with the 'content-type' header set to 'text/event-stream' and the client listen to that with the EventSource API.
If you're not using http/2, SSE will have a 6 connection limit. If your client opens 6 tabs to your website, they will no longer be able to send any http requests to your website. Basically, SSE is pretty much useless in http/1.1
Yes that's better because you don't need a persistent connection that websockets require and that is not an option on edge and at the same time there is no delay between when the data was available to the server and when the fetched it which is the problem with polling. But I wonder what are the drawbacks of server sent events? The only one I can think of is that it's a unidirectional communication, but can't we use post requests to send data from the client to the server, I think it would work and the only problem I see with this approach is that receiving data and sending it is done separately so it's not optimal if receiving data and sending it are coupled
For me one of the most important reason for splitting Backend calls between server and client side is the fact that server side calls are Blocking calls, therefore if we are dealing with large volume of data on server side then it will cause delay in page load by delaying the first content paint
It's an interesting approach. But what about caching and revalidating data? I assume that on the server side, we can perform revalidation based solely on time. Then, on the client side, we can easily revalidate data using the 'useQuery' capability when executing a mutation. Is this the correct approach? I'm getting tired of dealing with Next.js revalidation...
I was thinking about this yesterday while following one of your tutorials that if the data fetching can be done on the sever (irrespective of server componennts) then why we need react query at all. I guess, 60% of the time, fetching data on the server should do
but the problem arise when fetching from dynamic components like buttons, forms, etc (e.g fetching from client-side). You can't really fetch from server on those cases (unless you do server actions). So here it's where Tanstack query shines.
@@jsvrs fetching what exactly? most buttons leads to a separate route. forms are strictly advised to be submitted via server actions in next14 data fetching in general makes very less sense after the RSCs
@@amansagar4948 not all data fetching is tied to a button. maybe your component is an autocomplete form where it searches as the user types. makes more sense to fetch that data clientside
In your project for the first site visit time the page is served directly by the server with the data from database (first time is slow because server has to get data from database usually situated far ), then because you need a realtime data fetch every 10 seconds you write a logic that runs client side to keep fetching the data and updating the graph component (well websocket is fine but we still can use the simple https for cases where the rate of data updates is relatively low , maybe it updates 10 times a minute or so).In client side you also write the logic for graph changes everytime so in one . But do you think its really effective in terms of compute power requirement. Does it really save considerable amount of money for the website owners. because the fetching of data every 10 seconds is not really that big of a compute. Excluding case where the software is an admin side e commerce dashboard with high sales.
I'm doing this on a learning project right now. I initially load from the server, but then hydrate/update by clicking a button that uses useTransition. It re-fires the server-side function and gets the updated data and html. Have to say, it feels like a workaround, but it works for now.
@@samfights the way Next builds projects is that they do canary releases, which is like doing experimental releases into production. My hope is that they're drumming up a better way to handle this.
Hey Josh, I've been a huge fan of your videos, and your programming skills always leave me in awe. Your projects are truly inspiring, and I've learned so much from watching your content. I aspire to become as proficient as you in programming. I have a request for a video idea that I think would benefit many, including myself. Could you consider creating a tutorial using Next.js 14, Appwrite, Shadcn with Zod for authentication? I find it challenging as a beginner, especially when incorporating Zod, Toast Messages, and storing user account details in the database.
It would be great if you could also touch upon the fact that with AppWrite, user accounts are stored in Authentications. I suggest covering how to save these accounts as users in the database, enabling relationships and potentially exploring features. Additionally, demonstrating how users can upload, change, or remove their profile pictures, and having the default picture from AppWrite would be fantastic. Also, allowing users to modify their names and email addresses in their profiles. I appreciate your time and expertise. It would mean a lot to me, and I'm sure many others would find this tutorial incredibly beneficial. Thank you for considering my extended request! Grüße 🥰
What about Next.js data caching layer which persists the result of data fetches across incoming server requests and deployments?? React Query could fetch the data on server but what about caching it across the server request? It's surely a solution in one scenario and providing caching solution for single user only.
Is it possible to recreate a similar experience but without next.js, with like tanstack-router and hono or elysia, or something else? Hate the direction next.js is taking with way too much magic at so many levels..
Josh, can you please make a video on how you make your TH-cam videos and the Softwares that you use in your videos, I really like the way you animate the code and the way you explain the ideas on a board
I did this for a project sometime ago. But the problem with react query is that it will refetch the data once more on page load due to staleTime being 0
Edge runtime doesnt automatically mean you put the server close to the user, you can (which is the default when deploying on vercel) use the edge runtime in a single region. I think global is an enterprise feature, no?
Could you make a video of combining server actions with React Query? Where you would do mutations on server and use React Query to manage state, cache, handle errors, etc... Also by using server actions you would always have a benefit of really fast data transfer, since data is being handled on server side. I'm just starting to use both of these, so maybe i'm wrong and maybe this is not a good combination. Would like to hear others opinion.
Question: When polling for "real time" data, if you fetch every 5 seconds, is cost a concern? Because I thought that if you continuously fetch data that you needed websockets for some reason to keep cost in check? Anyone with a good explanation? much appreciated :)
What if our backend/api is completely seperate from next.js? For example a Go backend etc... What do you think would be the best approach for something like that?
You can fetch from the remote api on the server-side and with tanstack/query on the client-side ... that's no deal breaker. Doens't matter where you fetch from.
Great video, but what should we do if the client component needs to update the data through for example a POST request? Appreciate if you could link the GitHub repo used for this video as well.
I had look at t3 stack for a project. All seems ok for something small, but creating all these zod types was a nightmare. Ended up with zod prisma types to generate them all, but in the end everything ran so slow I scrapped it. Ts slow, eslint crashing etc. Now just plain server actions, and api routes with tanstack query only for specific places where I need to fetch data client side only i.e common form selects with country data
Do you think this is a hardware issue from your part? I have the same setup with zod prisma types and everything runs pretty smoothly. I have a Ryzen 5800x with 32GB RAM
i just dont want to use server component anymore. The complexity it adds is insane. I spent 3 hours trying to go through supabase and understand how to fetch data in server components.
I have 1 big problem with nextjs how to make a nice filter, sorting, search form with data fetched from API for example i have an endpoint /api/offer and i can add multiply query search /api/offer?ordering=-created_at&search=xyz?is_remote=true How to make it in nextjs ? Currently i use useState and after form submit i fetch the data but in frontend app URL nothing change which for me doesn't look good, is there a way to make it better?
@@roxxel8167 Well, not really, on the pages router, you get the data in a script tag and the component that uses that data is rendered on the client, so the HTML comes without that component that has dynamic data from the server. I was curious if now with server components, would the component be built into HTML at first call rather than hydrating the data
Is it OK to use fetch on the server (because it's cached in next js) and axios + react query on the client? Or is it better to just stick to only axios or fetch?
@@paw565 Yeh I get that, Axios is just better in almost every way, except for the obvious nextjs cache you get from fetch. I wouldn't really worry about it, most people do it this way in nextjs :)
@@REAZNx I just realized that I have to basically write each of my fetching functions twice. One with fetch for server, and one with axios for the client and react query. Seems like a whole a lot of repetition :/ Is there anyway to fix this?
@@paw565 experimental "cache" function might be what you are looking for. Nextjs docs suggest using that. It might potentially be what they are using for that fetch deduping internally. I haven't tested it personally so I cannot say for sure. This is an excerpt from the docs: "For cases where fetch is not suitable (e.g. some database clients, CMS clients, or GraphQL clients), you can use the React cache function to memoize functions."
@@ShivWad "use client" renders on the server and then hydrates on the client. If you need the render to be only on the client, you need to dynamically load the component and use option noSSR
Check out their docs about "Migrating from Vite". There they explain how to set up a fully client rendered Nextjs app if you need that. Not sure why would you want that, but yes it does exist as an option.
Can you make a video on a topic - A next js app that uses firebase authentication and rtk query to fetch data from a express server, the express server fetch data from mongodb. *The nextjs uses server side data fetching for authenticated user*
@@Yusuf-ok5rk it's not homework buddy I'm already working in a IT company. I'm just trying to achieve this from months but couldn't so I just used client side fetching because on the server side I can't get cookies.
man this is really amazing explanation and thank you for that, but you really talk to much and you have no code explanation, you should show us how we can code this and dive deeper into the code not just on top level.
Hope you had a great start into the new year
OR ELSE
I have a question, how did you pass the initial data to your useQuery, as I am using trpc, but I cannot do that and the refetchinterval, ? can you explain it bit , it will be very help full . Thank you
Amazing job dude
Waiting for the dashboard vid BTW
But I hope you deploy it on a platform other than Railway
Had to do a double take when I saw the thumbnail 😂 awesome stuff Josh ❤
appreciate ya man!!
@developedbyed You are great man, i have implemented this server side prefetching after watching your after your video. But i prefetch on on my layout component 😅
thank you so much. your visualization of the fetching data is really helpful
For polling you can also do Server-Sent Events (SSE). The server sends the data with the 'content-type' header set to 'text/event-stream' and the client listen to that with the EventSource API.
If you're not using http/2, SSE will have a 6 connection limit. If your client opens 6 tabs to your website, they will no longer be able to send any http requests to your website. Basically, SSE is pretty much useless in http/1.1
Yes that's better because you don't need a persistent connection that websockets require and that is not an option on edge and at the same time there is no delay between when the data was available to the server and when the fetched it which is the problem with polling. But I wonder what are the drawbacks of server sent events? The only one I can think of is that it's a unidirectional communication, but can't we use post requests to send data from the client to the server, I think it would work and the only problem I see with this approach is that receiving data and sending it is done separately so it's not optimal if receiving data and sending it are coupled
Okay I'm totally unfamiliar with this concept but seems interesting. So, how can I learn more about it?
I appreciate that you're concerned about promoting good practices in every video, keep it up!
For me one of the most important reason for splitting Backend calls between server and client side is the fact that server side calls are Blocking calls, therefore if we are dealing with large volume of data on server side then it will cause delay in page load by delaying the first content paint
I randomly done this method in my app with react-query - but here someone is teaching it ;)
It's an interesting approach. But what about caching and revalidating data? I assume that on the server side, we can perform revalidation based solely on time. Then, on the client side, we can easily revalidate data using the 'useQuery' capability when executing a mutation.
Is this the correct approach? I'm getting tired of dealing with Next.js revalidation...
Josh, you are my favorite react/nextjs teacher on youtube! Keep it up for our sake
I was thinking about this yesterday while following one of your tutorials that if the data fetching can be done on the sever (irrespective of server componennts) then why we need react query at all. I guess, 60% of the time, fetching data on the server should do
but the problem arise when fetching from dynamic components like buttons, forms, etc (e.g fetching from client-side). You can't really fetch from server on those cases (unless you do server actions). So here it's where Tanstack query shines.
@@jsvrs fetching what exactly? most buttons leads to a separate route. forms are strictly advised to be submitted via server actions in next14
data fetching in general makes very less sense after the RSCs
@@amansagar4948 not all data fetching is tied to a button. maybe your component is an autocomplete form where it searches as the user types. makes more sense to fetch that data clientside
@@amansagar4948 pagination. 🫳
In your project for the first site visit time the page is served directly by the server with the data from database (first time is slow because server has to get data from database usually situated far ), then because you need a realtime data fetch every 10 seconds you write a logic that runs client side to keep fetching the data and updating the graph component (well websocket is fine but we still can use the simple https for cases where the rate of data updates is relatively low , maybe it updates 10 times a minute or so).In client side you also write the logic for graph changes everytime so in one . But do you think its really effective in terms of compute power requirement. Does it really save considerable amount of money for the website owners. because the fetching of data every 10 seconds is not really that big of a compute. Excluding case where the software is an admin side e commerce dashboard with high sales.
What if you need to update the UI immediately after a user action, what is the best approach? (while updating also the DB)
I'm doing this on a learning project right now. I initially load from the server, but then hydrate/update by clicking a button that uses useTransition. It re-fires the server-side function and gets the updated data and html.
Have to say, it feels like a workaround, but it works for now.
@@incarnateTheGreat I'm doing the same on a side project using a Zustand store, we need to have a better option!
@@samfights the way Next builds projects is that they do canary releases, which is like doing experimental releases into production.
My hope is that they're drumming up a better way to handle this.
"Optimistic UI" is the term you're looking for.
SWR's optimistic UI + Immer example is the cleanest thing I've ever seen.
thank you.. i'll check it out @@CoryTheSimmons
I was thinking about the same thing before I saw your video notification
Hey Josh,
I've been a huge fan of your videos, and your programming skills always leave me in awe. Your projects are truly inspiring, and I've learned so much from watching your content. I aspire to become as proficient as you in programming.
I have a request for a video idea that I think would benefit many, including myself. Could you consider creating a tutorial using Next.js 14, Appwrite, Shadcn with Zod for authentication? I find it challenging as a beginner, especially when incorporating Zod, Toast Messages, and storing user account details in the database.
It would be great if you could also touch upon the fact that with AppWrite, user accounts are stored in Authentications. I suggest covering how to save these accounts as users in the database, enabling relationships and potentially exploring features.
Additionally, demonstrating how users can upload, change, or remove their profile pictures, and having the default picture from AppWrite would be fantastic. Also, allowing users to modify their names and email addresses in their profiles.
I appreciate your time and expertise. It would mean a lot to me, and I'm sure many others would find this tutorial incredibly beneficial.
Thank you for considering my extended request!
Grüße 🥰
What about Next.js data caching layer which persists the result of data fetches across incoming server requests and deployments??
React Query could fetch the data on server but what about caching it across the server request?
It's surely a solution in one scenario and providing caching solution for single user only.
Is it possible to recreate a similar experience but without next.js, with like tanstack-router and hono or elysia, or something else? Hate the direction next.js is taking with way too much magic at so many levels..
Next.js is simply doing what the React team tells them to... All react frameworks will eventually implement most of these same RSC features.
Interesting take… I can agree with this point a bit.. can suck out some of the fun or flexibility 😅
Can you share the name of the tool you used in this video.
Josh, can you please make a video on how you make your TH-cam videos and the Softwares that you use in your videos, I really like the way you animate the code and the way you explain the ideas on a board
In 7 mins i got to learn something new
Going to play around with it. thanks josh
Thanks for this awesome video ❤
What you are using for write the notes?
initialData at 6:25 is equals to the dashboardData prop?
I did this for a project sometime ago. But the problem with react query is that it will refetch the data once more on page load due to staleTime being 0
have you used the initial data property?
@@albert21994 Yes
Work with the enabled prop
Edge runtime doesnt automatically mean you put the server close to the user, you can (which is the default when deploying on vercel) use the edge runtime in a single region. I think global is an enterprise feature, no?
OOT: does anyone knows which design ui Josh use here? thanks in advance
Could someone tell me the tool he is using to draw and show, thanks !
Excalidraw
Thank you for reminding me that this exists :D
Could you make a video of combining server actions with React Query? Where you would do mutations on server and use React Query to manage state, cache, handle errors, etc... Also by using server actions you would always have a benefit of really fast data transfer, since data is being handled on server side. I'm just starting to use both of these, so maybe i'm wrong and maybe this is not a good combination. Would like to hear others opinion.
Question: When polling for "real time" data, if you fetch every 5 seconds, is cost a concern? Because I thought that if you continuously fetch data that you needed websockets for some reason to keep cost in check?
Anyone with a good explanation? much appreciated :)
how josh create this good code animation ?
What if our backend/api is completely seperate from next.js? For example a Go backend etc... What do you think would be the best approach for something like that?
You can fetch from the remote api on the server-side and with tanstack/query on the client-side ... that's no deal breaker. Doens't matter where you fetch from.
You need to finsih the saga how does this tie in with react querry, suspense streaming and optimistic updates? Can't wrap my head around it..
Do you have full stack Nextjs course ?
Great video, but what should we do if the client component needs to update the data through for example a POST request? Appreciate if you could link the GitHub repo used for this video as well.
You can mutate the data with a HTTP request and revalidate the data. Both TanStack Query and SWR support such scenarios
I had look at t3 stack for a project. All seems ok for something small, but creating all these zod types was a nightmare. Ended up with zod prisma types to generate them all, but in the end everything ran so slow I scrapped it. Ts slow, eslint crashing etc. Now just plain server actions, and api routes with tanstack query only for specific places where I need to fetch data client side only i.e common form selects with country data
Do you think this is a hardware issue from your part? I have the same setup with zod prisma types and everything runs pretty smoothly. I have a Ryzen 5800x with 32GB RAM
what is the diagram tool you use?
I'm curious too
Excalidraw
@@mathiasriissorensen6994 thanks
Excalidraw!
what webapp do you use for sketching?
i just dont want to use server component anymore. The complexity it adds is insane. I spent 3 hours trying to go through supabase and understand how to fetch data in server components.
Crazy Frontend stuff ;) Let the server do its intrinsic job and Frontend what the word literally implies
Hi josh, May I know what is the you are using for demonstration? It looks fantastic.
I have 1 big problem with nextjs how to make a nice filter, sorting, search form with data fetched from API
for example i have an endpoint /api/offer and i can add multiply query search /api/offer?ordering=-created_at&search=xyz?is_remote=true
How to make it in nextjs ?
Currently i use useState and after form submit i fetch the data but in frontend app URL nothing change which for me doesn't look good, is there a way to make it better?
Just set the options as searchParams and send them to your backend. No need for setState
hey josh i just wanna ask if i can use nodejs for backend instead of nextjs any cons and prons in terms of improvement and speed
Is the dashboard rendered as HTML directly from the server or it is hydrating the data and the js will generate the UI?
it's generated both on server and client, that's how next works
@@roxxel8167 Well, not really, on the pages router, you get the data in a script tag and the component that uses that data is rendered on the client, so the HTML comes without that component that has dynamic data from the server.
I was curious if now with server components, would the component be built into HTML at first call rather than hydrating the data
Is it OK to use fetch on the server (because it's cached in next js) and axios + react query on the client? Or is it better to just stick to only axios or fetch?
It doesnt really matter, whatever works best for you. I personally use fetch on server and axios + tanstack query on the client.
@@REAZNx thank you for the response! I just thought that mixing fetch and axios in one project is considered as a bad practice.
@@paw565 Yeh I get that, Axios is just better in almost every way, except for the obvious nextjs cache you get from fetch. I wouldn't really worry about it, most people do it this way in nextjs :)
@@REAZNx I just realized that I have to basically write each of my fetching functions twice. One with fetch for server, and one with axios for the client and react query. Seems like a whole a lot of repetition :/ Is there anyway to fix this?
@@paw565 experimental "cache" function might be what you are looking for. Nextjs docs suggest using that. It might potentially be what they are using for that fetch deduping internally. I haven't tested it personally so I cannot say for sure.
This is an excerpt from the docs:
"For cases where fetch is not suitable (e.g. some database clients, CMS clients, or GraphQL clients), you can use the React cache function to memoize functions."
Before watching this I'm guessing it's about react query's initial data feature
Is it possible to do the entire nextjs project client side rendering? thanks Josh!!!
@@ShivWad hey "use client" also renders on the server. do not misguide others in the wild
@@amansagar4948 then whats the difference if i use "use client" or i not?
@@ShivWad "use client" renders on the server and then hydrates on the client. If you need the render to be only on the client, you need to dynamically load the component and use option noSSR
@@nithinsvarrier670 ahh. Thanks for the info. I will edit my comment
Check out their docs about "Migrating from Vite". There they explain how to set up a fully client rendered Nextjs app if you need that. Not sure why would you want that, but yes it does exist as an option.
Sweet logic
Can you make a video on a topic -
A next js app that uses firebase authentication and rtk query to fetch data from a express server, the express server fetch data from mongodb.
*The nextjs uses server side data fetching for authenticated user*
mfer is pushing his homework on 3rd parties
@@Yusuf-ok5rk it's not homework buddy I'm already working in a IT company. I'm just trying to achieve this from months but couldn't so I just used client side fetching because on the server side I can't get cookies.
Thanks
You are good
Bro you can build AI voice assistant chatbots and add 10 different voice to speak you can build this application
Hello Josh.
waddup champ
Please do a proper video on this, with some demos 😀😀
Are you used to play vedio games 😅?
So you can came up with this title
yeah man I play every now and then!
Great a
ozm
"lots of other cool shit" 😅
hell yeah
build a nextjs tutorial plz
man this is really amazing explanation and thank you for that, but you really talk to much and you have no code explanation, you should show us how we can code this and dive deeper into the code not just on top level.
Theo says that seperation of concerns is bad:
th-cam.com/video/eMTFzpxR0QQ/w-d-xo.htmlfeature=shared
build a nextjs tutorial plz
build a nextjs tutorial plz
build a nextjs tutorial plz
build a nextjs tutorial plz
build a nextjs tutorial plz
build a nextjs tutorial plz
build a nextjs tutorial plz