Best of Both Worlds: How navigation works in Next.js

#nextjs #react #javascript #webdev

Server-Side Rendering, Client-Side Navigation

Next.js is best known for being an SSR (Server-Side Rendering) framework, but it does support client-side navigation. This means you can expect a partial reload when navigating between your pages, just like with a regular SPA app. Great in terms of user experience!

But wait. With client-side navigation, the new page is rendered by JS on the client side rather than on the server side. Does this really make sense for an SSR framework?

After all, the whole point of using an SSR framework is to avoid client-side rendering, so that web crawlers can index the entire page even if they don't run JS, which results in a better SEO result.

This turns out not to be a problem for Next.js nagivations. In fact, if you disable JS in your browser (here is how in Chrome), you will see that page navigation still works in your Next.js website.

How Does It Actually Work?

What's really happening is, every <Link> component in Next.js has this <a> tag under the hood. When you click on the link, some JS will run to render the new page and prevent the default <a> navigation.

When JS is disabled, client-side navigation won't work, but the default <a> navigation still works. The new page will be rendered on server side, then fetched and reloaded on the client side. And that's exactly what web crawlers need to navigate between your pages.