Next.js Discord

Discord Forum

Is there a way to have a server-side component update as cached values changed?

Answered
American Shorthair posted this in #help-forum
Open in Discord
American ShorthairOP
export default async function FolderSize({folder, exclude = []}: FolderSizeProps) { 

    const folderSize =  unstable_cache(
        async () => {
          return getFolderSizeInGB(folder, exclude).toFixed(5); 
        },
        ['size_folder_'+folder],
        { revalidate: 60, tags: ['size_folder_'+folder] }
    );

    return (
        <span>
            {folderSize()}
        </span>
    );
}

If I have a component like this, what would be the best practice for sending an update to clients as these values change? As I understand, there's nothing with the revalidation that would trigger to re-send it, so I would probably need a different approach. Just wondering what is best?
Answered by LuisLl
You could do this in a server action and trigger the revalidation in there:
revalidateTag("your_tag");

This will send the Server Component payload back in the same request-response roundtrip with the new content
View full answer

3 Replies

American ShorthairOP
I see now, the only realistic way to do something like this is using websockets, or something. Because the server sends stuff down as pure HTML (which makes sense)
LuisLl
You could do this in a server action and trigger the revalidation in there:
revalidateTag("your_tag");

This will send the Server Component payload back in the same request-response roundtrip with the new content
Answer
LuisLl
Did that solve your issue?