How to use app router while maintaining pure client navigation?

[xboy2012]

Hello. In my project I faced a problem.

I know that app router has a lot of advantages and make use of it in my project.

In order to achieve i18n, all pages of my project are server components, which gains a great firtst screen experience of course.

But when I trigger router.push(), or <Link />, a request is sent, which includes _rsc=xxxx.
Then a noticable delay will happen after user click the link/button and before the new route is loaded.

• I want to make use of sever component to gain a great firtst screen experience.
• Once the page is loaded, later navigation should just happen on the client-side, without any extra _rsc=xxx request and noticable delay.
• The address bar should just work as expected without any hijack code.

How should I achieve that goal? Thanks very much.

[rajeshdavidbabu]

The answer is that even if you place "use client" at the very top of your component tree, including your root layout.tsx, the Next.js server is still fundamentally involved in every navigation, and an RSC payload will still be requested.

The App Router's Core Philosophy: Server-Driven Navigation

The Next.js App Router is not a traditional Single-Page Application (SPA) router that operates exclusively in the browser. It is a server-centric router that uses React Server Components as its underlying primitive.

Think of it this way: the "use client" directive does not turn off the RSC architecture. Instead, it acts as a boundary marker that tells the server: "Stop rendering on the server at this point. Instead, send a placeholder and a reference to a JavaScript bundle that the client should download and execute."

• Here's what happens on a page switch, even if the destination page and layout are marked with "use client":
  • Navigation is Intercepted: When you click a component, the App Router intercepts the navigation event. It does not immediately try to render the new page on the client.
  • A Request is Made to the Server: The router's first action is always to make a request to the Next.js server for the new route.
  • The Server Generates the "Blueprint" (RSC Payload): The server receives the request and processes it. Because your entire page is a Client Component, the server's job is simple but essential. It generates an RSC payload that is effectively a set of instructions for the client-side router.

[xboy2012]

I understand your explaination. However, in this way we are just elliminating all the advantages of SPA, and become fully coupled with server response. As I said, the main concern is the noticable delay. The user might be wondering if something is broken, and may try multiple clicks.

What's worse, we don't even have a way to let the navigation only happen in client side.

For an use client component, there's abosolutely no data required from server, and should be directly rendered in place.
As for the RSC payload, it can happen later, instead of blocking user from navigating.

[rajeshdavidbabu]

True I am surprised how Next.js is not making it obvious to people. It should be highlighted !!

This is my main problem with Next.js, they are a server company and they make money through server compute or function invocations.

So I assume its a business decision !!