Re-render only one Component in my page

[Miquel1991]

Hi, I'm using Next.js V15 and I'm struggling with the re-rendering of the whole page. The behavior I wanna achieve is the re-rendering of just one part. So here is the sum up of the situation:

I have one page X (which by the way is async because I need to await "params", which in v15 is a Promise) and there I have three components: A, F and B. The page is like a Forum, so imagine reddit where there's and OP and a list of messages, A would be the OP and the list of messages would be B, and F would be the filter options.

A: is a Server Component that fetches data, this data may eventually change, but we can assume we only wanna to fetch once
B: is a Server Component that fetches data. This data is going to change for sure, is a collection of Posts made by users.
F: Client Component used to select some sorting criteria (recent posts, popular posts etc.).

So when the user selects the criteria of filtering F, I just wanna re-render the component B, not the whole page. I have tried with search params (?sort=popular) but it causes a re-render of the whole page. I also have tried Parallel Routes but it's kind of a mess and I don't know if it's the best approximation. I also have seen that web apps like Udemy allows to sort the list of questions without using URL.

Another important point: in the F component I would also like to include the pagination. I prefer to use pagination instead infinite scrolling or other techniques, and I wonder the best way to wrap everything up.

Thank you very much.

[ivocreates]

Hey! I'm also using Next.js (v15 too) and ran into something similar a while ago. I haven’t fully implemented this myself yet, but one idea a friend suggested (and it kinda makes sense) is to make the component B (your list of posts) a Client Component that fetches its own data based on some state (like the filter/pagination options).

That way, when the user interacts with the F component (the filters), you just update the state — and only B will re-render with the new data. You avoid re-rendering the whole page or triggering a full navigation.

It might look like this at a high level:

// F (Filter component) passes sort option and page to B
<F onChange={(sort, page) => setOptions({ sort, page })} />

And then in B, you use useEffect or something similar to fetch the data when sort or page changes.

I know this kinda goes against the Server Component vibe, but if you only want B to update without a full page refresh, this might be a good compromise. Especially if filters/pagination don’t need to be in the URL.

Again, I’m not 100% sure this is the best solution, but it was suggested by some dev friends so thought I’d pass it along in case it helps. Let me know if you try it!

Thanks :)

[Miquel1991]

Hi! thanks, yes that's I solutions I already came up. The only reason I would prefer a server component is because of SEO. But still, it seems weird to me that nextjs fails with these "scroll to the top" behavior.