Are RSCs and Next.js Really Detrimental to React?

In the ever-evolving world of web development, React has been a game-changer, facilitating the creation of interactive user interfaces with ease. Recently, however, there’s been some buzz on social media platforms like Twitter and Reddit about the potential negative impact of Next.js’s app router on React – particularly concerning who’s in control of React and the developer experience.

The Next.js App Router vs. Pages Router

Next.js offers two different routing solutions: the conventional Pages router and the newer App router. Some developers argue that the App router provides a subpar developer experience. To shed light on this matter, let’s delve into a comparison using a simple test application.

Pages Router: Prop Drilling and Duplication

The traditional Pages router approach involves fetching data within getServerSideProps and passing it down to components through props, a practice known as prop drilling. This can result in scattered code and maintenance difficulties, especially when multiple routes require the same data.

Consider the following simplified code example for the main index route using the Pages router:

// pages/index.js with Pages router
export async function getServerSideProps() {
  const comments = await fetchComments();
  return { props: { comments } };
}

export default function Home({ comments }) {
  return <CommentsList comments={comments} />;
}

And for the users’ route:

// pages/users.js with Pages router
export async function getServerSideProps() {
  const comments = await fetchComments();
  const users = await fetchUsers();
  return { props: { comments, users } };
}

export default function Users({ comments, users }) {
  return (
    <div>
      <UsersList users={users} />
      <CommentsList comments={comments} />
    </div>
  );
}

App Router: A Cleaner, More Decentralized Approach

In contrast, the App router enables a more encapsulated component structure where each component is responsible for fetching its own data. This significantly reduces prop drilling and duplication, resulting in cleaner and more maintainable code.

Here’s how you might write the same functionality using the App router:

// pages/index.js with App router
export default function Home() {
  return <CommentsComponent />;
}

// components/CommentsComponent.js
export default function CommentsComponent() {
  const comments = useCommentsData(); // Custom hook to fetch comments
  return <CommentsList comments={comments} />;
}

And for the users’ route:

// pages/users.js with App router
export default function Users() {
  return (
    <div>
      <UsersComponent />
      <CommentsComponent />
    </div>
  );
}

The App router approach allows components like CommentsComponent and UsersComponent to fetch their own data independently, thereby simplifying the data flow within the application.

Handling Slow API Responses

One of the advantages of the App router is its ability to handle slow API responses elegantly. By isolating data fetching to individual components, the App router can display loading states for just the components affected by a delay, rather than stalling the entire page.

Conclusion

The debate over whether RSCs (React Server Components) and Next.js’s App router are beneficial or detrimental to React development is ongoing. However, it’s clear that the App router offers a more modular and maintainable approach to building React applications, especially when it comes to managing data fetching and component rendering.

FAQ

Q: What are React Server Components (RSCs)? A: React Server Components are a feature that allows React components to be rendered on the server, enabling data fetching and other server-side logic to be encapsulated within the component itself.

Q: Is prop drilling bad in React? A: Prop drilling can make applications harder to maintain as they grow, as it involves passing data through multiple layers of components. However, it is not inherently bad and can be appropriate for small applications or certain scenarios.

Q: Can the App router handle slow API calls better than the Pages router? A: Yes, the App router can manage slow API calls more gracefully by isolating slow components and allowing the rest of the application to render normally.

Q: Is the Next.js App router less maintainable than the Pages router? A: On the contrary, the App router can lead to a more maintainable codebase by reducing prop drilling and duplication of data fetching logic across routes.