nextjs how to render serverside and then update data client-side based on a filter?

const PostsPage = async () => {
  const posts = await db.post.findMany({
    take: 25,
    include: {
      author: true
    }
  });

  return (
    <div>
      <div>
        <label>Filter verified posts</label>
        <input type="checkbox" ... /> // checkbox to filter posts (add query string?)
      </div>
      
      <div>
        {posts.map(p => (<Post
          key={p.id} 
          id={p.id} 
          content={p.content} 
          authorName={p.author.name} 
        />))}
      </div>
    </div>
  );
};

const PostsPage = async () => {
  const posts = await db.post.findMany({
    take: 25,
    include: {
      author: true
    }
  });

  return (
    <div>
      <div>
        <label>Filter verified posts</label>
        <input type="checkbox" ... /> // checkbox to filter posts (add query string?)
      </div>
      
      <div>
        {posts.map(p => (<Post
          key={p.id} 
          id={p.id} 
          content={p.content} 
          authorName={p.author.name} 
        />))}
      </div>
    </div>
  );
};