How to get real-time data in Next.js App router
Answered
James4u posted this in #help-forum
James4uOP
I would like to get real-time data in Next.js App router. So in server component I make a request to an endpoint to get data. And to show real-time data I need to retrigger the data fetching but I have no idea.
If I use client component, I would do that in interval but since I am using Server Component, I don't have any idea on this.
I don't want to use socket.io or something. just with native fetching and framework. No way for me?
Plz let me know if you have experience or feedback
Thanks ðŸ™
If I use client component, I would do that in interval but since I am using Server Component, I don't have any idea on this.
I don't want to use socket.io or something. just with native fetching and framework. No way for me?
Plz let me know if you have experience or feedback
Thanks ðŸ™
Answered by Giant panda
You are describing polling. And that is only possible on the client-side. What you can do is to fetch the initial data server-side and pass it into your client component. There you can either initialize a state with thah particular value and just manually fetch a route handler every 10s or you use something like react-query to get the implementation details of polling out of the way.
12 Replies
Giant panda
You are describing polling. And that is only possible on the client-side. What you can do is to fetch the initial data server-side and pass it into your client component. There you can either initialize a state with thah particular value and just manually fetch a route handler every 10s or you use something like react-query to get the implementation details of polling out of the way.
Answer
James4uOP
Thanks @Giant panda for your message
Yeah, I agreed on your thoughts
but on the other hand like hmm, let me explain
This is a home assignment from a company
and they wanted see how familiar I am with App router
so that's why I am not fetching data from the client side and yeah, I have no way to get fresh data by time flows
but thanks @Giant panda
Giant panda
The app router doesn't have real-time fetching capabilities
Server-side code is only run during the request
It has no interactivity and can't push new data
You'd either rely on client-side polling or use a classic websocket (be it an external service you implement or a 3rd party provider)