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

@kumardeepanshu8503

5 ай бұрын

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

5 ай бұрын

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

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

5 ай бұрын

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

5 ай бұрын

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

4 ай бұрын

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

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

@joshtriedcoding

5 ай бұрын

appreciate ya man!!

@poizonncs8264

5 ай бұрын

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

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

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

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

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

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

@incarnateTheGreat

5 ай бұрын

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

5 ай бұрын

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

@incarnateTheGreat

5 ай бұрын

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

5 ай бұрын

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

@samfights

5 ай бұрын

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

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

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

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

5 ай бұрын

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 🥰

Thanks for this awesome video ❤

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

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

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

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

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

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

4 ай бұрын

@@amansagar4948 pagination. 🫳

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

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

5 ай бұрын

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

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

5 ай бұрын

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

Thank you for reminding me that this exists :D

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

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

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

4 ай бұрын

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.

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

@roxxel8167

5 ай бұрын

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

@jackmarius5423

5 ай бұрын

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

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.

what webapp do you use for sketching?

You solved the bug.

What you are using for write the notes?

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

5 ай бұрын

have you used the initial data property?

@nithinsvarrier670

5 ай бұрын

@@albert21994 Yes

@TheGrandChieftain

5 ай бұрын

Work with the enabled prop

Thanks

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?

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

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

5 ай бұрын

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

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

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

5 ай бұрын

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

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

@mathiasriissorensen6994

5 ай бұрын

Excalidraw

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

5 ай бұрын

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

@paw565

5 ай бұрын

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

@REAZNx

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

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

Do you have full stack Nextjs course ?

What tools are used for text prototyping? Thanks

@_Spacecraft

5 ай бұрын

Also wondering this

@alex-wj6ce

5 ай бұрын

@@_Spacecraft check out excalidraw

@beynod_ordinary

5 ай бұрын

No reply yet.@@_Spacecraft

@adamkirosingh

5 ай бұрын

excalidraw

You are good

how josh create this good code animation ?

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

Sweet logic

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

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

@amansagar4948

5 ай бұрын

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

@kisstamas6675

5 ай бұрын

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

@nithinsvarrier670

5 ай бұрын

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

5 ай бұрын

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

@rand0mtv660

5 ай бұрын

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.

what is the diagram tool you use?

@umaradam3788

5 ай бұрын

I'm curious too

@mathiasriissorensen6994

5 ай бұрын

Excalidraw

@rtorcato

5 ай бұрын

@@mathiasriissorensen6994 thanks

@joshtriedcoding

5 ай бұрын

Excalidraw!

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

5 ай бұрын

mfer is pushing his homework on 3rd parties

@ashishsharma__

5 ай бұрын

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

Great a

ozm

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

Hello Josh.

@joshtriedcoding

5 ай бұрын

waddup champ

build a nextjs tutorial plz

"lots of other cool shit" 😅

@joshtriedcoding

5 ай бұрын

hell yeah

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

@joshtriedcoding

5 ай бұрын

yeah man I play every now and then!

Theo says that seperation of concerns is bad: kzread.info/dash/bejne/l4GIqNypqLWWgbQ.htmlfeature=shared

Man just use remix

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