no data fetching with shallow routing in nextjs

no data fetching with shallow routing in nextjs

When doing shallowing routing, your URL will change but data fetching methods won’t be called. Keep in mind that this only works for same page URL changes! #javascript

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

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page