Dark side of Next.js - App Router

asmyshlyaev177

Alex

Posted on November 6, 2024

Dark side of Next.js - App Router

Today, I want to share the disappointing issue with Next.js - App router.

About SSR

I assume that you're aware of what SSR is and vaguely understand how it works.
E.g. server return HTML page with markup, while JS and CSS bundles downloading, user see the page instantly and parsing JS code taking some time.

The _rsc problem

Every time you switch route in Next.js, it's requesting some meta info from server first, you can see such requests as {smt}_rsc, stand for _ReactServerComponent as I can guess.

_rsc requests

Server responds with something like this

_rsc response

Problem that Next.js router make those requests even if you need to update searchParams, e.g. /url?param=value, it isn't a new page, all purely client side, but there is still a _rsc request.

Another example, when have list with cards, every card has an edit button with Next/Link component, and separate edit page like /card/{some_id}/edit.
Next.js trying to optimize things and prefetching those _rsc requests ahead of time. In result, there will be a request for every card, but user possibly won't ever click an edit button.

Even if you have very fast server and internet connection, network requests making UI slower, and put more stress on a server.

While SSR is great for an initial page load, navigation after app loaded happens way more often.

Discussions

There are few discussions about this problem:

How to solve it

Switching to something like Remix will be too hard for existing project.

Can use plain old window.history interface with pushState/replaceState instead of App router, when you sure it purely client side.

For queryParams/searchParams can use a library to simplify those things - state-in-url , it's using history by default and has an option to use App router. Also, it's way simpler than NUQS, parsing with proper type just work out of the box.

Tnx for reading, consider giving it a like and maybe share.

💖 💪 🙅 🚩
asmyshlyaev177
Alex

Posted on November 6, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Dark side of Next.js - App Router
webdev Dark side of Next.js - App Router

November 6, 2024