This Data Fetching Combo is OP

With this approach, we can get both benefits from server and client-side rendering. It's pretty neat, works well for me and I hope it does for you too!!
Stay up to date with web dev: www.joshtriedcoding.com/
-- my links
Discord: / discord
GitHub: github.com/joschan21

[@joshtriedcoding]

Hope you had a great start into the new year OR ELSE

[@kumardeepanshu8503]

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

[@ahmed_osamaa]

Amazing job dude Waiting for the dashboard vid BTW But I hope you deploy it on a platform other than Railway

[@alex_rpascual]

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.

[@drprdcts]

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

[@yassinesafraoui]

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

[@user-ym2tp6iq2p]

Okay I'm totally unfamiliar with this concept but seems interesting. So, how can I learn more about it?

[@developedbyed]

Had to do a double take when I saw the thumbnail 😂 awesome stuff Josh ❤

[@joshtriedcoding]

appreciate ya man!!

[@poizonncs8264]

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

[@josephnaru363]

I appreciate that you're concerned about promoting good practices in every video, keep it up!

[@samfights]

What if you need to update the UI immediately after a user action, what is the best approach? (while updating also the DB)

[@incarnateTheGreat]

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]

@@incarnateTheGreat I'm doing the same on a side project using a Zustand store, we need to have a better option!

[@incarnateTheGreat]

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

[@CoryTheSimmons]

"Optimistic UI" is the term you're looking for. SWR's optimistic UI + Immer example is the cleanest thing I've ever seen.

[@samfights]

thank you.. i'll check it out @@CoryTheSimmons

[@footyflair038]

Josh, you are my favorite react/nextjs teacher on youtube! Keep it up for our sake

[@keshavakumar9828]

In 7 mins i got to learn something new Going to play around with it. thanks josh

[@MrGuysmo92]

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

[@SubzEye]

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

[@TheBelafleck]

Thanks for this awesome video ❤

[@Alireza-kw6fj]

I randomly done this method in my app with react-query - but here someone is teaching it ;)

[@sourav1795]

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

[@abderehmen783]

Josh, can you please make a video on how you make your KZbin 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

[@samislam2746]

I was thinking about the same thing before I saw your video notification

[@manitahriri9204]

Hi josh, May I know what is the you are using for demonstration? It looks fantastic.

[@Ahmed_005]

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.

[@pieterdepauw6599]

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

[@user-cq8yz1sz3s]

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.

[@user-cq8yz1sz3s]

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 🥰

[@albert21994]

Thank you for reminding me that this exists :D

[@jordymaryns4945]

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

[@amansagar4948]

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

[@JoseWaldier]

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.

[@amansagar4948]

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

[@PraiseYeezus]

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

[@JoseWaldier]

@@amansagar4948 pagination. 🫳

[@akosbalint3485]

initialData at 6:25 is equals to the dashboardData prop?

[@imposterdev789]

Can you share the name of the tool you used in this video.

[@xtromp]

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

[@KevinVandyTech]

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

[@TutoDS2014]

What you are using for write the notes?

[@stylianostsoumanis3380]

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?

[@Xeras82]

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.

[@omarvillalobos5249]

what webapp do you use for sketching?

[@jackmarius5423]

Is the dashboard rendered as HTML directly from the server or it is hydrating the data and the js will generate the UI?

[@roxxel8167]

it's generated both on server and client, that's how next works

[@jackmarius5423]

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

[@kukiponosanhrvat]

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.

[@user-ir3yw8bs4i]

Crazy Frontend stuff ;) Let the server do its intrinsic job and Frontend what the word literally implies

[@RABWA333]

Do you have full stack Nextjs course ?

[@asimalqasmi7316]

Thanks

[@paw565]

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?

[@REAZNx]

It doesnt really matter, whatever works best for you. I personally use fetch on server and axios + tanstack query on the client.

[@paw565]

@@REAZNx thank you for the response! I just thought that mixing fetch and axios in one project is considered as a bad practice.

[@REAZNx]

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

[@paw565]

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

[@rand0mtv660]

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

[@juliusmarminge]

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?

[@sahibnasirri5581]

OOT: does anyone knows which design ui Josh use here? thanks in advance

[@kacperwodarczyk9349]

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?

[@IanJamieson]

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

[@user-ju8cu3ru4d]

Could someone tell me the tool he is using to draw and show, thanks !

[@mathiasriissorensen6994]

Excalidraw

[@user-us3bs8px3m]

You solved the bug.

[@nithinsvarrier670]

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

[@albert21994]

have you used the initial data property?

[@nithinsvarrier670]

@@albert21994 Yes

[@TheGrandChieftain]

Work with the enabled prop

[@StivenRusTV]

how josh create this good code animation ?

[@IanJamieson]

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

[@outis99]

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

[@rootbindev]

You are good

[@beynod_ordinary]

What tools are used for text prototyping? Thanks

[@_Spacecraft]

Also wondering this

[@alex-wj6ce]

@@_Spacecraft check out excalidraw

[@beynod_ordinary]

No reply yet.@@_Spacecraft

[@adamkirosingh]

excalidraw

[@sebastiancastillo3560]

Is it possible to do the entire nextjs project client side rendering? thanks Josh!!!

[@amansagar4948]

@@ShivWad hey "use client" also renders on the server. do not misguide others in the wild

[@kisstamas6675]

@@amansagar4948 then whats the difference if i use "use client" or i not?

[@nithinsvarrier670]

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

[@ShivWad]

@@nithinsvarrier670 ahh. Thanks for the info. I will edit my comment

[@rand0mtv660]

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.

[@ekchills6948]

Sweet logic

[@rtorcato]

what is the diagram tool you use?

[@umaradam3788]

I'm curious too

[@mathiasriissorensen6994]

Excalidraw

[@rtorcato]

@@mathiasriissorensen6994 thanks

[@joshtriedcoding]

Excalidraw!

[@edhahaz]

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

[@ashishsharma__]

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]

mfer is pushing his homework on 3rd parties

[@ashishsharma__]

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

[@outis99]

Before watching this I'm guessing it's about react query's initial data feature

[@Fresco7]

Great a

[@TeluguTunesHub017]

Bro you can build AI voice assistant chatbots and add 10 different voice to speak you can build this application

[@imkir4n]

ozm

[@prashlovessamosa]

Hello Josh.

[@joshtriedcoding]

waddup champ

[@developertools95]

build a nextjs tutorial plz

[@user-yz5yo1hd7k]

Please do a proper video on this, with some demos 😀😀

[@farzadmf]

"lots of other cool shit" 😅

[@joshtriedcoding]

hell yeah

[@EPIC-ev4lx]

Are you used to play vedio games 😅? So you can came up with this title

[@joshtriedcoding]

yeah man I play every now and then!

[@xxXAsuraXxx]

Man just use remix

[@JakobRossner-sc3gp]

Theo says that seperation of concerns is bad: kzbin.info/www/bejne/m363d62mrbdjh7Mfeature=shared

[@developertools95]

build a nextjs tutorial plz

[@developertools95]

build a nextjs tutorial plz

[@developertools95]

build a nextjs tutorial plz

[@developertools95]

build a nextjs tutorial plz

[@developertools95]

build a nextjs tutorial plz

[@developertools95]

build a nextjs tutorial plz

[@developertools95]

build a nextjs tutorial plz