【Next.js和訳】Routing/Shallow Routing

この記事について

この記事は、Routing/Shallow Routingの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shallow Routing

例

• Shallow Routing

シャロールーティングでは、データを取得するメソッド（getServerSideProps、getStaticProps、getInitialPropsなど）を再度実行することなく、URL を変更することができます。

更新されたpathnameとqueryは、(useRouterまたはwithRouterで追加された)routerオブジェクトを介して、状態を失うことなく受け取ることができます。

シャロールーティングを有効にするには、shallowオプションをtrueに設定します。次のような例を考えてみましょう。

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

// 現在のURLは「/」です。
function Page() {
  const router = useRouter()

  useEffect(() => {
    // 最初のレンダリング後には必ずナビゲーションを行います。
    router.push("/?counter=10", undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // カウンターが変わりました
  }, [router.query.counter])
}

export default Page

URL は/?counter=10.に更新され、ページは置換されず、ルートの状態のみが変更されます。

以下のように、componentDidUpdateで URL の変更を監視することもできます。

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // 無限ループを避けるために、propsが変更されたことを確認する
  if (query.counter !== prevProps.router.query.counter) {
    // 新しいクエリに基づいてデータを取得する
  }
}

警告事項

シャロールーティングは、同一ページの URL を変更する場合にのみ機能します。例えば、pages/about.jsという別のページがあり、これを実行したとしましょう。

router.push("/?counter=10", "/about?counter=10", { shallow: true })

これは新しいページなので、シャロールーティングを行うように依頼したにもかかわらず、現在のページをアンロードし、新しいページをロードし、データのフェッチを待ちます。