This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

What is this POC about?

This small POC is to demonstrate how we can approach client side routing with react-aria-components (RouterProvider) and NextJS Router (React Router / TanStack Router / Remix Router could be used as well).

Application is splitted into server-routing and client-routing routing. Both parts are identical with one small difference - client-side is wrapped with RouterProvider provided by react-aria-components. As a result in client-routing we can have:

• routing without full page reload
• re-render only what's needed (e.g. Nav component is not re-rendered, only content is)
• nice loaders when changing page (better UI/UX for end users)

What about SSR?

Well, thanks to the NextJS partial prerendering there is no visible difference in page source returned from server between client-routing and server-routing, so wrapping whole app inside use client doesn't make any difference (tested with static pages / dynamic pages / with and without fetching data).

What about SSR?

All components from react-aria-components that displays a link <a href> can accept routerOptions prop by default. For NextJS case this object has only scroll: boolean as property. There is no way to pass for example prefetch using routerOptions.

How to pass prefetch or other stuff from NextJS link?

It's possible and quite easy to achieve, just create a component (NextAriaLink in case of this POC), make it accept props that you need and make prefetch possible programmatically using router.prefetch(href).

Differences when using onPress with client side routing and server side routing

Client side routing

When using client side routing, onPress event handler with async operations (like sending analytics data to GA, for example) are handled correctly as long as internal link is used. Even when handler takes more time than page change, it's still finished.

Server side routing

On the other hand - when server side routing is used (no RouterProvider) onPress event might not be finished until page changes and because of page change with server side routing requires full page reload, there is no guarantee that async onPress handler will be finished (e.g. after page reload request to GA with some event and payload will be cancelled by browser).