Efficient Strategies for Updating Notification Badge in Next.js: Polling vs Server-Sent events
I'm creating a bell icon in a header component with a badge to show unread notifications. The header is part of the layout displayed on every page, I'm unsure how to update it due to the cache. I don't need the badge to show instantly when there is an update; there can be a short delay.
In terms of approach
If I create a server component that grabs the unread count, it stays the same unless you hard refresh the page.
If I do a client component that polls an API route, it would be inefficient.
If I use server-sent events, then every user would open up a connection to the API route with the unread count, so that would be a lot of connections.
Can anyone think of something simpler?
0 Replies