Cookie Consent by Free Privacy Policy Generator 📌 The Modern Guide to Next.js Shallow Routing


✅ The Modern Guide to Next.js Shallow Routing


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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!

...

✅ The Modern Guide to Next.js Shallow Routing


📈 55.71 Punkte

✅ Linux Networking Shallow Dive: WireGuard, Routing, TCP/IP and NAT


📈 36.95 Punkte

✅ Understanding Deep vs Shallow Copy in JavaScript: A Comprehensive Guide


📈 29.51 Punkte

✅ Shallow dive in Spring framework - Beginner Guide


📈 29.51 Punkte

✅ Open Routing: Facebook gibt interne Plattform für Backbone-Routing frei


📈 26.12 Punkte

✅ Kotlin Routing - routing everything


📈 26.12 Punkte

✅ Advanced Routing: Homematic IP bekommt intelligentes Routing


📈 26.12 Punkte

✅ Guide to Internationalisation (i18n) in Next.js with Routing


📈 24.44 Punkte

✅ Shallow vs. Deep Copying in JavaScript


📈 23.89 Punkte

✅ Git Shallow Clone and Clone Depth


📈 23.89 Punkte

✅ What is the difference between a deep copy and a shallow copy in JavaScript?


📈 23.89 Punkte

✅ Loyalty Above All: The “Shallow State” of the Trump Administration


📈 23.89 Punkte

✅ Shallow Copy vs Deep Copy in JavaScript


📈 23.89 Punkte

✅ Django up to 1.11.22/2.1.10/2.2.3 Shallow Key Transformation QuerySet.filter() sql injection


📈 23.89 Punkte

✅ Deep vs Shallow cloning 2


📈 23.89 Punkte

✅ Microsoft Quantum proves shallow quantum circuits provide an exponential advantage


📈 23.89 Punkte

✅ 🤯Deep vs Shallow cloning ???


📈 23.89 Punkte

✅ Crackdown 3 is fun, dated, and disappointingly shallow


📈 23.89 Punkte

✅ JS - Shallow Copy and Deep Copy of an object


📈 23.89 Punkte

✅ BELOW PC review: An atsmopheric world can't save a shallow experence


📈 23.89 Punkte

✅ Shallow Copy v/s Deep Copy


📈 23.89 Punkte

✅ Blazor CSS-isolation a ::shallow quick fix..


📈 23.89 Punkte

✅ What are different between Normal Copy and Shallow Copy, Deep Copy in JavaScript Object


📈 23.89 Punkte

✅ Fun With Next.js 13 New Routing System


📈 18.82 Punkte

✅ Juniper Junos Next-Generation Routing Engine input validation


📈 18.82 Punkte

✅ Basic Routing and Pages in Next.js


📈 18.82 Punkte

✅ Conquer Complex Routing in Next.js 14: Mastering Group Routes for a Smoother Dev Experience


📈 18.82 Punkte

✅ Getting Started with Next.js: Part 2 - Creating Pages and Routing


📈 18.82 Punkte

✅ Ensuring Type Safety in Next.js Routing


📈 18.82 Punkte

✅ Next js Routing


📈 18.82 Punkte

✅ Exploring Next.js Routing: Updates in v13.0.0"


📈 18.82 Punkte











matomo

Datei nicht gefunden!