🚀
【Next.js和訳】Routing/Shallow Routing
この記事について
この記事は、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 })
これは新しいページなので、シャロールーティングを行うように依頼したにもかかわらず、現在のページをアンロードし、新しいページをロードし、データのフェッチを待ちます。
Discussion