Handling data fetching in non-route components with React SSR frameworks

Question

I'm exploring React SSR frameworks (like Next.js, Remix, etc.) and have a question regarding data fetching in non-route components. In these frameworks, data loading is often handled at the route level. However, I'm curious about the best practices for components that aren't directly tied to a specific route, such as a reusable LikeButton.

In React SSR frameworks, is it possible to define data fetching and mutation logic within non-route component while still benefiting from SSR? Maybe Server components could be a better fit for what I´m looking for?

Answer 1

In the latest version of Next.js, data fetching can be performed at the component level using React Server Components, like:

export default async function LikeButton() {
  const likes = await fetchLikes()
 
  return <div>{likes}</div>
}