So, I have a page with the path of video/[id]/[name] . It consists of a video and comments.

There, I have a server action.

    try {
      let inserted = await commentsDao.insertComment(comment);
      if (!inserted) return { error: 'Unable to create a comment. Please try again' };
  
      revalidatePath("video/[id]/[name]");
      return { success: true };
    } catch (e) {
      console.error(e);
      return { error: 'An unexpected error occurred.' };
    }

After user creates a comment, the page is sucessfully updated and revalidatePath works in that case. Without it, the page still shows stale comments.

The issue happens later, when I refresh the page manually. It still shows the old data and I need to do Shift+F5 to get the new comments.

The issue is that supabase client makes a get request, and that one returns the stale information.

const VideoPage: NextPage<Props> = async ({ params }) => {
  // Assume you have fetched video, comments, and related videos
  // pass them to their respective components as props

  if(!params.id) {
    redirect('/');
  }

  
  let video = await videosDao.getVideoWithCommentsById(params.id);

This function stays cached.

The code underlying the getVideoWithCommentsById. Essentially, it uses supabase API.

            let query = supabase
                .from(table)
                .select(fields.join(','));
            
            if (condition) {
                query = query.eq(condition.field, condition.value);
            }
            
            let { data: record, error } = await query.single();
            
            if (error) {
                console.error(`Failed to get record with related data from ${table}: ${error.message}`);
                return null;
            }
            
            if (!record) return null;

            return dbHelpers.toCamelCase(record);