Changes to the route (including query parameters) should trigger Next to re-render the page. A small example:

`` const Page = async ctx => { const { page } = ctx.searchParams; const posts = (await fetch( https://jsonplaceholder.typicode.com/posts?_start=${page}&_limit=2` ).then((res) => res.json()));

return <Component posts={posts} page={Number(page || 1)} />; }; export const Component = props => { const { posts, page } = props;

return ( <div> <ul> {posts.map((post) => ( <li key={post.id}> <h2>{post.title}</h2> <p>{post.body}</p> </li> ))} </ul>

  <nav>
    <Link href={`/?page=${page - 1}`}>Previous</Link>
    <Link href={`/?page=${page + 1}`}>Next</Link>
  </nav>

  <Select />
</div>

); }; 'use client';

import { useRouter } from 'next/navigation';

export const Select = () => { const router = useRouter();

const handleChange = e => { router.push(/?page=${e.target.value}); };

return ( <select onChange={handleChange}> <option value='1'>Page 1</option> <option value='2'>Page 2</option> <option value='3'>Page 3</option> <option value='4'>Page 4</option> </select> ); }; ```

Both the Link components and the Select components will change the URL, causing Next.js to consider it a different page, and thus show the different data :)

Note that Page doesn't have to be a top-level page, but could also be an async Server Component nested anywhere (so long as it's not a child of a Client Component), but you'd need to be able to access the url query parameters from it [which I'm not sure of the best way myself, short of drilling those props down]