Q19: What is Shallow Routing in the Pages Router?
Shallow routing allows changing the URL without re-running data fetching methods (getStaticProps, getServerSideProps). Call router.push('/page?query=1', undefined, { shallow: true }) to update state in the URL while preserving active page component state.
Executing Shallow Navigation
import { useRouter } from 'next/router';
export default function Page() {
const router = useRouter();
const updateFilter = (filter) => {
router.push(`/search?filter=${filter}`, undefined, { shallow: true });
};
return <button onClick={() => updateFilter('active')}>Filter</button>;
}💡 Updates query parameter in the address bar without executing page data functions.
Key Takeaways
- Updates URL query string without re-triggering server data methods.
- Only works for URL changes inside the same page.
Knowledge Check
Does shallow routing prevent getStaticProps/getServerSideProps from re-executing when navigating to a DIFFERENT page file?