The App Router is amazing, but it also changes the way we think about
React. Most issues I see aren't framework bugs. They're old habits
carried into a server-first world.
Here are seven mistakes worth avoiding.
1. Fetching Data with useEffect
If you're writing this by default:
useEffect(() => {
fetch("/api/posts");
}, []);
Ask yourself: Can this run on the server instead?
const posts = await getPosts();
Fetching on the server usually means less JavaScript, a faster first
load, and simpler components.
2. Using "use client" Too Early
Don't turn an entire page into a Client Component because one button
needs interactivity.
Instead, keep the page on the server and move only the interactive part
into a Client Component.
The smaller the client boundary, the smaller your bundle.
3. Forgetting the Difference Between Static and Dynamic Pages
Calling APIs like cookies() or headers() makes a route dynamic.
Before using them, decide whether your page should be static or
personalized. That decision directly affects performance and caching.
4. Passing Entire Objects to Client Components
Instead of this:
<UserCard user={user} />
Prefer this:
<UserCard name={user.name} avatar={user.avatar} />
Only send the data the component actually needs.
5. Putting Everything Inside Server Actions
A Server Action should trigger work, not contain your entire application
logic.
A good pattern is:
- Validate input
- Call a service
- Return the result
Your business logic stays reusable and much easier to test.
6. Importing Heavy Libraries Everywhere
Chart libraries, editors, and large utilities can quickly increase your
client bundle.
Keep them inside the smallest possible Client Component or load them
only when they're needed.
7. Wrapping the Whole App with Context Providers
Not every provider belongs in layout.tsx.
If only one feature needs a provider, keep it close to that feature
instead of wrapping the entire application.
This reduces unnecessary client rendering.
Final Thoughts
The biggest mindset shift in the App Router is simple:
Server first. Client only when necessary.
Following that principle alone helps you build applications that are
faster, cleaner, and easier to maintain.
Based on the original article. Expanded and improved with additional details and explanations.
Source:
https://medium.com/@amirjld/the-5-most-common-next-js-app-router-mistakes-and-how-to-fix-them-632565a5fb96
Top comments (0)