Can a server-side RSC update itself at a specific internal?
Answered
Siberian posted this in #help-forum
SiberianOP
I'm creating a digital clock component and currently using "use client" and "useEffect"
Is there a way to do this with a server-side component?
useEffect(() => {
const timer = setInterval(() => {
setDate(new Date());
}, clockConfig.refreshInterval);
return () => {
clearInterval(timer);
};
}, []);Is there a way to do this with a server-side component?
Answered by joulev
with pure RSC, no. but you can use a client component with a similar logic and call
router.refresh() in a startTransition call to refresh the page33 Replies
@Siberian I'm creating a digital clock component and currently using "use client" and "useEffect"
useEffect(() => {
const timer = setInterval(() => {
setDate(new Date());
}, clockConfig.refreshInterval);
return () => {
clearInterval(timer);
};
}, []);
Is there a way to do this with a server-side component?
with pure RSC, no. but you can use a client component with a similar logic and call
router.refresh() in a startTransition call to refresh the pageAnswer
@joulev with pure RSC, no. but you can use a client component with a similar logic and call `router.refresh()` in a `startTransition` call to refresh the page
SiberianOP
Is that better than useEffect?
How would I handle that with setting a refresh interval?
@Siberian Is that better than useEffect?
No you have to use useEffect
Except instead of setDate() you router.refresh()
SiberianOP
Hmm...next/router doesn't have router.refresh()
oh from next/navigation
so weird these lib names
SiberianOP
So, I'm still somewhat confused. useEffect already takes care of updating the browser. Why do I need to router.refresh() at all?
Is this just so I don't need to use a state variable for the date?
@Siberian So, I'm still somewhat confused. useEffect already takes care of updating the browser. Why do I need to router.refresh() at all?
router.refresh() reruns the server component
If you don’t need to rerun the server components to get latest data from them you don’t need to do it
I don’t understand what you mean by “useEffect already takes care of updating the browserâ€
SiberianOP
I guess ultimately my question is: is there anything wrong with the code I posted in the OP? Does router.refresh() and useTransition() do something "better" than what is already tehre?
@Siberian I guess ultimately my question is: is there anything wrong with the code I posted in the OP? Does router.refresh() and useTransition() do something "better" than what is already tehre?
1. The code looks fine
2. The code can’t update/revalidate a server component for obvious reasons
2. The code can’t update/revalidate a server component for obvious reasons
SiberianOP
My apologies, as I really am a novice react/nextjs user but...it does update/work. The interval is setup to run every 500 ms to set the date to the current date, then the date is displaying in the HTML.
So the interval timer is called inside the useEffect to refresh the time every 500ms
@Siberian My apologies, as I really am a novice react/nextjs user but...it does update/work. The interval is setup to run every 500 ms to set the date to the current date, then the date is displaying in the HTML.
The date is updated, but the server component is not. You are updating a client component, that date is a state in a client component
SiberianOP
Correct!
You said I couldn't do it in a server component.
So I'm fine with that (that was my original question)
Because you cannot run client side logic in server components
SiberianOP
But then you suggested using things like useTransition and router.refresh() which is where I got confused.
So what exactly is your question?
@Siberian But then you suggested using things like useTransition and router.refresh() which is where I got confused.
router.refresh() is used for when you do data fetching inside server components and want to rerun it to get fresh data
SiberianOP
You said this:
with pure RSC, no. but you can use a client component with a similar logic and call router.refresh() in a startTransition call to refresh the page
So I thought you were suggesting using a client component in a different/better way than what I was doing already.
with pure RSC, no. but you can use a client component with a similar logic and call router.refresh() in a startTransition call to refresh the page
So I thought you were suggesting using a client component in a different/better way than what I was doing already.
Ok, ignore every single thing that I said then. And tell me what you are really asking about
What do you want to do
We are 29 messages in and I don’t know what your question is
SiberianOP
I'm creating a digital clock that displays the current time in the browser. I posted my code above as a way to do it using client components. My original question was whether there was a server-side component way of doing it.
just because I want to use server-side as much as possible until you can't
SiberianOP
Cool, thanks. Sorry for all the time spent on it. I appreciate your help!