maybe router.refresh()?

Unless I call that in client page

how is your data being updated?

like is it from a form?

or are you manually updating the db and want the user to directly see changes?

Updating the dB and want users see the changes

if you dont have websockets, you can just make a setTimeout to run a get api route every 5s

Im using server action.s

ok so just call the server action then

OK. Can you give example please

Then unless I use client

yea, or use websockets

Can u help me with web socket

its not a nextjs thing, you need to research how to use websockets

commenting to follow, i saw something a few days ago demoing some tech that just happened to show how to get that instant refresh your talking about with out using client components.
It was setting up an api route that would get called any time there were database changes and push those changes to the page instantly, using the tags in the next chaching features. If i find that again or remember what it was to go get it ill come back through and post it

Oh ok

what is your backend?

Next js, node

database

?

Mongodb

Why can’t you use client components? Client components are required for interacitivy; server components cannot be interactive after the page loads.

Note that client components are not a de-optimization, and client components are still server-rendered

He didnt ever say that he needed interactivity, i actually made the assumption of the oposite from what he said about updating the data manually on the backend so im thinking like example a blog that automatically shows the new blog post on the home page as soon as they are posted in the cms , or maybe like a stock ticker that is constantly streaming data updates and needs to change with out refresh

Sure

But there maybe other reasons to avoid it like the component is running some sort of server side code, and there is no clean way to refactor it into seperate parts

I fetch the data direct in the page

and how are you updating the data?

like specifically

I have dashboard for updating data to database and user page where the user can interact with this datas

So if user is already on page and updates goes on at the dashboard, the cant view the updates unless they refresh the page. So I was try to find a way of automatically refreshing the page for the users so that any updates, they can instantly get it

this might not work, just a thought
so on your data on your front end give it a tag
on your cms panel when you push data call a revalidate on the tag
https://nextjs.org/docs/app/api-reference/functions/revalidateTag

someone else who knows more about using the tags can probably confirm if this will cause fresh data to render on the front end with out a refresh

this wont

the only time revalidatePath causes refetching, is from a user submits a server action

Oh this is what it was I had seen, its react refine

www.youtube.com/watch?v=6a3Dz8gwjdg

so the real time data updates were part of this tool, which under the hood likely still uses a lot of client side stuff but can probably be used to keep it all clean.

I will add that a need for this may not actually be likely unless the application is highly dependant on realtime streaming data, which it doesnt sound like, if you are adding a new blog post or photo to gallery or product to a store while extremely nice the functionality is overkill in all honestly, like you wont even be on amazon and a new item just pops up or your on facebook or twitter and all of a sudden a new post flashes in, in the social media example they are loaded through pagination or something of that nature twitter has you click a link to load new post and has a dynamic component that updates the number of new post which has zero correlation to whats actually loaded on the refresh, so im not 100% its dynamiaclly rendering updates from the back end, amazon shows new products on a page refresh same with major news sites, with the exception of a couple of very major news outlets who run live event trackers that pull updates to the page as youre on them but it is all client side rendering.

If he wants to see new data on the page without refreshing it, that’s interactivity and needs to be a client component

If the page needs to change after it’s finished loading, without refresh, that requires a client component because it requires client-side javascript to run

In a client component, you can create state and update it in response to the return value of a server action, which you can use to display the new data on the page

revalidateTag will not cause data to render on the front end without a refresh, it will just cause the cache to be invalidated for the next page load. The page would still need to be refreshed to see new data

This requires either a websocket connection where the server can push a “new data” message to connected clients, or otherwise for the client to repeatedly “poll” the server for new data.

You can look into prebuilt websocket services (e.g. Prisma Pulse, Supabase Realtime, Liveblocks, , etc.)

or you can build your own websocket server, but it probably can’t be deployed on vercel because it requires maintaining a long-running connection (and serverless function invocations have limited invocation time)

does next navigation have a refresh page function?

You can useRouter().refresh() from a client component

but there’s no way to know when to refresh if it’s a completely different user that’s making those changes on the “dashboard”

would need to either to do polling or a websocket

Wooow not easy

Correct

Once a webpage is loaded it’s loaded.

Client components can add any type of interactivity you want—that keeps running after the page is loaded, but they can’t magically respond to changes made by another user

would definitely be a neat use case for next to try and handle built in someday. Like "client actions"

server can call an RPC function on the client using magic websocket stuff

You can re-fetch data whenever you want in a client component @Mini Lop, but you have to know when to do that, and there’s no great signals for that if the changes are made by another user (unless you build them!)

If you build a “polling” approach that would be something like “re-fetch the data every few seconds, just in case it’s changed”

and websockets can get you a better system because your server can tell the client when it’s time to re-fetch data

Vercel publishes a list of providers that will host websocket servers for you: https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections#providers

Your websocket solution would look like:

1. User loads the page
2. Your client component establishes a connection to the websocket server

3. Admin uses server action to update data from dashboard
4. Server action sends an event to websocket server
5. Websocket server sends an “update” to all connected clients, containing the new data

6. The user receives the “update” message from the websocket server
7. Your client component updates the data it’s displaying, based on the update it received from the websocket

Thank you boss

let me know if that works out for you

OK im thinking of pusher js

that sounds great

feel free to mark my message as solution if that works out for you

Ok