The Modern Guide to Next.js Shallow Routing

When loading a new page, the expected behavior of the URL is to change in tune with the new page. What if there was a way to update the URL of the page without reloading the page or fetching new data from the server? Oh yes, there is! Next.js offers a method for that called shallow routing.

In this blog post, you will learn about shallow routing in Next.js, how to implement Next.js shallow routing in your application, its benefits, and use cases.

What is Shallow Routing in Next.js?

Shallow Routing is a technique in Next.js that allows you to update the URL of a page without refreshing the page or fetching new data. Basically, the URL changes, but the state remains.

Suppose you visit a webpage on a clothing website with the route clothes/buy, a state is loaded when you click on this site and data is fetched. Now, if you try to visit a new page on that website, with the route clothes/buy?counter=5, of course, this should load a new page with some new data, making you lose the previous state of the clothes/buy route. Updating the URL of a website always leads to a corresponding update of the web page and page content but with shallow routing, that is not the case.

Next.js shallow routing is particularly useful in improving a website’s speed and overall user experience.

How Shallow Routing Works

A major upgrade and talking point of Next.js in comparison to React is in its routing feature and how it is relatively easier. The working principle that guides the reload or refresh of a page is that when the DOM catches a new change in data on the webpage, it refreshes the page in tune with that change. In Next.js, you can manually implement data fetching using these methods:

• getServerSideProps, which allows you to fetch and display data at request time.
• getStaticProps, which allows you to pre-render a page at build time.
• getInitialProps, which runs on both the server side and the client side.

These methods control data fetching, and data fetching controls page reload. Next.js shallow routing works by updating (or reloading) a particular page without running or triggering these data fetching methods.

Getting Started

Time to dive right in with a Next.js shallow routing example, but before then, make sure you have Next.js installed in your application. If you don’t, you can do so by running this command in your terminal and following the on-screen instructions to get your project set up:

npx create-next-app@latest

PS: Make sure you also have Node.js installed on your computer.

Implementing Shallow Routing

The first step to implementing Next.js shallow routing is to import React’s useEffect hook and the useRouter hook, which controls the routing functionality in Next.js. Here’s how we do that:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

Next, we can create a function for this like so:

function RoutingExample() {
 const router = useRouter()

  useEffect(() => {
 // run navigation after the first render
    router.push('/?counter=1', undefined, { shallow: true })
  }, [])

  useEffect(() => {
 // monitor counter
  }, [router.query.counter])
}

export default RoutingExample

Here, we create a function called RoutingExample and pass in the /?counter=1 argument which represents the updated URL we want to navigate to without reloading the page. Most importantly, we set the value of shallow to true.

By doing so, we can navigate to the URL localhost:3000?counter=1 from our default localhost:3000 without fetching any new data or the page being reloaded. The new page with the updated URL can be viewed as an extension of the previous page since the content of the previous page persists on the screen. This means the Next js router shallow does not work for pages that do not exist on the same routing hierarchy. That is, it only works for same-level URLs.

Benefits of Shallow Routing

Shallow routing in Next js is important and beneficial in many ways, some of which include:

1. Better transitions since it does not trigger the getServerSideProps and getStaticProps data fetching methods.
2. It reduces the time it takes to navigate between web pages.
3. It offers an improved user experience.
4. It allows you to navigate between pages without losing state.

Common Use Cases of Shallow Routing

Shallow routing Next js 13 is useful for diverse cases, here are a few use cases where shallow routing excels:

• Pagination: Pagination is better implemented using shallow routing since we would want to preserve the state of that particular page while being able to load through more content and update the URL in tune with the changes.
• Implementing Active States: With Next.js shallow routing, you can track active states in a particular page by passing the value of the updated URL to a particular section(which is active).
• Filtering and Sorting Through Data: When filtering or sorting through some data on the web, having the page reload after every filter can be annoying. Shallow routing Next js enables you to filter and sort through data through the URL without triggering a page reload.

Conclusion

In this blog post, you have learned about shallow routing, how to implement shallow routing, its benefits, and use cases of Next.js shallow routing. Feel free to try it out and explore!

Not quite sold on Next.js? Learn how it compares to Nuxt.js by following our comprehensive guide on Nuxt vs Next. Happy Coding!