the pattern to do it in nextjs is to call revalidatePath or revalidateTag, then the next request to the page will trigger the revalidation

revalidatePath will only clear the cache for that page as per my knowledge, it won't re-render the page. Let me see revalidateTag can be helpful or not for this.

then the next request to the page will trigger the revalidation

help me undertand this part.

if the next request to the page will trigger(you mean user visits the page url again, it'll render with new data) then that's not I want, the user is still on the page, and the page should show the new data without refreshing or visiting the same page url again

if i recall correctly,

- request to the page: serve old data
- request to the page: serve old data
- revalidatePath() call
- request to the page: serve old data, but start revalidating
- subsequent requests to the page will continue to serve old data until the revalidating is complete, then after that all requests will get new data

so only the few first requests after revalidatePath() get the old data, as the revalidation should be reasonably fast.

yeah revalidatePath works like this

The data from all the rsc components in the current path will be revalidated

refreshed

so every prop u passed down from a rsc to a clientside will mutate

im pretty sure revalidatePath for mutating only works with server actions tho

unless u use polling or sockets

what about Server Side Events?

It's not about removing the old cache, I was asking if anything from the server can trigger a re-render of the server component on the page on user's browser, to show the data that has just been updated in the api on the server.

in that case, no it is not possible. must use client side rendering with SSE/ws

server components are not SSE sources

ok, SSE can't be used on with server components but I can trigger a router.refresh from a client component on the same page as the server compnent which will load the latest data as the cache is also cleared before sending the SSE, so this might work?

yes router.refresh() from the client component will get fresh data.

that said, i feel like you are triggering a mutation from the client. why not use server actions then?

ok, so keeping the connection to server alive, does it cost like as same as invoking a server function, because still using server resources.

yes

once again there is no SSE. server components are not SSE sources. there is no live connection to the server.

I actually don't know how to use server actions, never cared to learn

instead of

await fetch(...) // update data in db
router.refresh()

you should put the update data in db logic inside a server action and call revalidateTag/revalidatePath in there

no, no I meant the SSE listner from the client component, after the page mounts will connect with the server right? to listen for events

no there is no SSE from the server to the client. unless you implement it yourself, no nextjs doesn't provide SSE.

but the logic to update data is already happening in a webhook, it's not updated by the user, but 3rd party service which sends request to my webhook

yes in this case then triggering router.refresh() from the client is a good idea

in this case can't use server actions. simply router.refresh()

all this time I was talking about nextjs! why does it not provide SSE 😭

server components are purely based on HTTP requests. you GET from the server, you get back the HTML, that's it. frameworks like nextjs do not provide SSE, if you want real time data you need to implement it yourself and host it on a server supporting SSE. (vercel and similar services do not support SSE)

thanks for clarifying my doubts, you're huge help, sad to know Vercel doesn't support SSE to client components though!

vercel is serverless. serverless is fundamentally incompatible with long-lived connections such as SSE or websocket.

similarly, netlify, cloudflare pages, aws lambda all do not support SSE/WS. you need to host on a VPS/dedicated server to have real time technologies, or use third party backend providers.

what about using redis pub-sub

server component itself cannot be real time data sources.

if you bring your own real time data sources and access those sources on the client, it will work well. you can use anything. redis pub-sub. websocket server. firestore real time. anything.