This content originally appeared on DEV Community and was authored by Alex
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.
Server responds with something like this
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:
- https://github.com/vercel/next.js/discussions/59167
- https://www.reddit.com/r/nextjs/comments/1ds5nl4/what_are_all_these_rsc_network_requests/
- https://www.reddit.com/r/reactjs/comments/13vkgl0/nextjs_app_router_is_complete_failure_what/
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.
This content originally appeared on DEV Community and was authored by Alex
Alex | Sciencx (2024-11-06T19:57:49+00:00) Dark side of Next.js – App Router. Retrieved from https://www.scien.cx/2024/11/06/dark-side-of-next-js-app-router/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.