Shallow routing concept in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when shallow routing is used in Next.js?

Consider a Next.js page that uses shallow routing to change the URL query without running getServerSideProps again. What is the expected behavior?

NextJS

import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();

  function changeQuery() {
    router.push({ pathname: '/page', query: { tab: '2' } }, undefined, { shallow: true });
  }

  return (
    <>
      <p>Current tab: {router.query.tab || '1'}</p>
      <button onClick={changeQuery}>Change Tab</button>
    </>
  );
}

A The URL does not update, but the component re-renders with new query values.

B The URL updates but the component does not re-render.

C The URL updates and the page fully reloads, calling getServerSideProps again.

D The URL updates and the component re-renders without calling getServerSideProps or getStaticProps again.

💡 Hint

Shallow routing updates the URL without a full page reload or data fetching methods running again.

Shallow routing in Next.js changes the URL and updates the router state without running data fetching methods like getServerSideProps again. This allows the component to re-render with new query parameters efficiently.

📝 Syntax

intermediate

Which code snippet correctly uses shallow routing in Next.js?

Select the code snippet that correctly performs shallow routing to update the URL query without a full page reload.

A router.push('/page?tab=2', undefined, { shallow: true });

B router.replace('/page?tab=2', undefined, { shallow: false });

C router.push('/page?tab=2', undefined, { shallow: false });

D router.replace('/page?tab=2', undefined, { shallow: true });

💡 Hint

Shallow routing requires the shallow option set to true and usually uses router.push to add a new history entry.

Using router.push with the third argument { shallow: true } correctly enables shallow routing. router.replace can also be used but is less common for shallow routing that adds history entries.

🔧 Debug

advanced

Why does shallow routing not update the component state as expected?

A developer uses shallow routing to update the URL query, but the component does not reflect the new query value. What is the most likely cause?

NextJS

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function Page() {
  const router = useRouter();
  const [tab, setTab] = useState(router.query.tab || '1');

  useEffect(() => {
    setTab(router.query.tab || '1');
  }, []);

  function changeTab() {
    router.push({ pathname: '/page', query: { tab: '2' } }, undefined, { shallow: true });
  }

  return (
    <>
      <p>Current tab: {tab}</p>
      <button onClick={changeTab}>Change Tab</button>
    </>
  );
}

A Shallow routing does not update the URL query, so tab remains the same.

B The useEffect has an empty dependency array, so it does not update tab when router.query changes.

C The router.push call is missing the shallow option, causing a full reload.

D The initial state uses router.query.tab which is undefined, causing an error.

💡 Hint

Check how useEffect dependencies affect state updates when router.query changes.

The useEffect hook runs only once because of the empty dependency array. It does not respond to changes in router.query, so the tab state does not update when shallow routing changes the URL.

🧠 Conceptual

advanced

What is a key limitation of shallow routing in Next.js?

Which of the following is a limitation when using shallow routing in Next.js?

A It does not trigger getServerSideProps or getStaticProps, so data fetching is not re-run automatically.

B It causes a full page reload, losing client-side state.

C It cannot update the URL query parameters.

D It disables client-side navigation and forces server navigation.

💡 Hint

Think about what shallow routing skips compared to normal routing.

Shallow routing updates the URL and component state but does not trigger Next.js data fetching methods like getServerSideProps or getStaticProps again. This means data may not refresh automatically.

❓ state_output

expert

What is the value of router.query.tab after shallow routing?

Given the following code, what will be logged to the console after clicking the button?

NextJS

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

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    console.log('Tab query:', router.query.tab);
  }, [router.query.tab]);

  function changeTab() {
    router.push({ pathname: '/page', query: { tab: '3' } }, undefined, { shallow: true });
  }

  return <button onClick={changeTab}>Change Tab</button>;
}

A '2'

B undefined

C '3'

D null

💡 Hint

Shallow routing updates the URL query and router.query state immediately.

When shallow routing updates the URL query, router.query reflects the new query parameters immediately, triggering the useEffect and logging '3'.