This Data Fetching Combo is OP 

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

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?

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 😅

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 🥰

Next.js is simply doing what the React team tells them to... All react frameworks will eventually implement most of these same RSC features.

You can mutate the data with a HTTP request and revalidate the data. Both TanStack Query and SWR support such scenarios

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.

​@@JoseWaldier 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. 🫳

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

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.

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

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

Just set the options as searchParams and send them to your backend. No need for setState

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

have you used the initial data property?

@@albert21994 Yes

Work with the enabled prop

Excalidraw

Also wondering this

@@_Spacecraft check out excalidraw

No reply yet.@@_Spacecraft

excalidraw

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

I'm curious too

Excalidraw

@@mathiasriissorensen6994 thanks

Excalidraw!

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.

waddup champ

yeah man I play every now and then!

hell yeah