Auto-refresh page without user intervention
Answered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
Hi, I am trying to create a display for one of our function rooms where the screen should auto-reload without user interaction. The data displayed is retrieved through an API. Is there a meta tag supported by Next to achieve this? I am trying to use setInterval then use redirect to the same page without any luck. Any idea how can this be achieved? Thanks for your help.
Answered by B33fb0n3
you can either import your component dynamically with skipping SSR:
Or you can make sure that every function that access the window object is only called after the component is mounted (for example in your useEffect)
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })Or you can make sure that every function that access the window object is only called after the component is mounted (for example in your useEffect)
16 Replies
@Cuvier’s Dwarf Caiman Hi, I am trying to create a display for one of our function rooms where the screen should auto-reload without user interaction. The data displayed is retrieved through an API. Is there a meta tag supported by Next to achieve this? I am trying to use setInterval then use redirect to the same page without any luck. Any idea how can this be achieved? Thanks for your help.
the nextjs app router is by default SSR. So one request get one answer (the page) and nothing changes. If you want to change something on your site, the client would handle that.
You want to change it automatically and we need the client. There are multiple way you can do:
1. Long polling: client makes one request. The request will be awaited and only fulfilled, when there is new data.
2. Short polling: is like setInterval
3. Websocket: a constant connection between your server and your client. The client listen to new events and updates the page according to these events.
So, what suites best for you? Idk, because I am not involved in your project. [This](https://media.licdn.com/dms/image/v2/D4E22AQHBkZHBxuQHgQ/feedshare-shrink_800/feedshare-shrink_800/0/1707980411641?e=2147483647&v=beta&t=weZFnq7bf0B9L5S4hU1GuvF88qBc6pn6I0OiVoBoEag) shows it in visual:
I didn't mention SSE. Maybe that's the best for you
You want to change it automatically and we need the client. There are multiple way you can do:
1. Long polling: client makes one request. The request will be awaited and only fulfilled, when there is new data.
2. Short polling: is like setInterval
3. Websocket: a constant connection between your server and your client. The client listen to new events and updates the page according to these events.
So, what suites best for you? Idk, because I am not involved in your project. [This](https://media.licdn.com/dms/image/v2/D4E22AQHBkZHBxuQHgQ/feedshare-shrink_800/feedshare-shrink_800/0/1707980411641?e=2147483647&v=beta&t=weZFnq7bf0B9L5S4hU1GuvF88qBc6pn6I0OiVoBoEag) shows it in visual:
I didn't mention SSE. Maybe that's the best for you
@B33fb0n3 the nextjs app router is by default SSR. So one request get one answer (the page) and nothing changes. If you want to change something on your site, the client would handle that.
You want to change it automatically and we need the client. There are multiple way you can do:
1. Long polling: client makes one request. The request will be awaited and only fulfilled, when there is new data.
2. Short polling: is like setInterval
3. Websocket: a constant connection between your server and your client. The client listen to new events and updates the page according to these events.
So, what suites best for you? Idk, because I am not involved in your project. [This](https://media.licdn.com/dms/image/v2/D4E22AQHBkZHBxuQHgQ/feedshare-shrink_800/feedshare-shrink_800/0/1707980411641?e=2147483647&v=beta&t=weZFnq7bf0B9L5S4hU1GuvF88qBc6pn6I0OiVoBoEag) shows it in visual:
I didn't mention SSE. Maybe that's the best for you
Cuban Crocodile
I think he’s using an external api and I want to ask if you can share a resource or blog on how to implement websocket in nextjs 🙏
@Cuban Crocodile I think he’s using an external api and I want to ask if you can share a resource or blog on how to implement websocket in nextjs 🙏
create a client component and create a socket connection to your websocket server: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
Cuvier’s Dwarf CaimanOP
Thanks both for your input. I think short polling or sse would be suitable for us. How can I best implement short polling in Next?
@Cuvier’s Dwarf Caiman Thanks both for your input. I think short polling or sse would be suitable for us. How can I best implement short polling in Next?
short polling is just an interval (
setInterval(yourFunction, 1000)) inside a client componentCuvier’s Dwarf CaimanOP
ok got it. I'll give it a go. Thanks again.
Cuvier’s Dwarf CaimanOP
How can I make my function (inside setInterval) be a redirect to the same page to refresh the information?
router.refresh()@Cuvier’s Dwarf Caiman How can I make my function (inside setInterval) be a redirect to the same page to refresh the information?
that what joulev said or just save the initial data inside a useState and push new data to the useState (in my opinion easier. And also more costs effective)
Cuvier’s Dwarf CaimanOP
Tried the router.refresh path and getting this error: NextRouter was not mounted. I am using App router in Next 14. I will give useState a go.
@Cuvier’s Dwarf Caiman Tried the router.refresh path and getting this error: NextRouter was not mounted. I am using App router in Next 14. I will give useState a go.
useRouter should be imported from next/navigation instead. the link in that error message should give you more infoCuvier’s Dwarf CaimanOP
Thanks joulev. router refresh works. However I am getting: window is not defined error. Any idea if this is related?
@Cuvier’s Dwarf Caiman Thanks joulev. router refresh works. However I am getting: window is not defined error. Any idea if this is related?
you can either import your component dynamically with skipping SSR:
Or you can make sure that every function that access the window object is only called after the component is mounted (for example in your useEffect)
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })Or you can make sure that every function that access the window object is only called after the component is mounted (for example in your useEffect)
Answer
Cuvier’s Dwarf CaimanOP
All is working now and thanks both for your help. Much appreaciated!