Next.jsの approuter における、shallow routing について、
特に良かった記事と、そこで得られた学びのメモです。
現状NextjsのApp Routerでshallow routingは対応していない
pagesではできる:
nextjs-ja-translation-docs.vercel.app
ちなみに、shallow routingとは、現在表示しているページをリロード、再レンダリングせずにURLのみを変更すること。
これに関しては、以下のイシューでも議論されています
これに関して、次の記事に解決策が掲載されていた
「window.history.pushState()」を使用する:
「window.history.pushState()」とは？
MDNリファレンス：
以下の記事によると、
履歴に指定したURLを追加するってこと。指定したURLへの再読み込みは発生しないので、読み込みの処理は自分で行う。
また、これに関しては、この記事でも解説されていた：
得られた学び
- Next.jsは、バージョン14.1にて、ネイティブのHistory APIの使用をサポートした。
- なので、App Routerでshallow routingを実現するには、「window.history.pushState()」を使用することができる
- これは、ページをリロード、再レンダリングせずにURLのみを変更することができるネイティブのAPI。
