nazo6 knowledge

Nextjs App DirectoryでSSGとsearch paramsを使うと遅くなる?

作成:2023/8/14 13:08:14

更新:2023/8/14 13:26:26

デカめのリストを持ち、search paramsでソートの順番を指定できる感じのアプリを作っている(https://example.com/?order=descみたいな感じ)。
すると、なんだかstateを変更後にURLが変更されるのが遅い気がした。
もしかしてと思いネットワークリクエストを見ると…

router.push()する度にServer Componentsがfetchされている!
いやまあ確かにSSRではそれが正しいのだがSSGではどんなリクエストを送ろうが返ってくるものは同一のはずなのでこれは意味がない。
しかもなんだか動作もおかしくて、例えばソート順を変更すると瞬間で再ソートは行われるのだが1秒後にURLが変更されると同時にソート順がまた変更される。この再ソートはソートが不安定によるもののはずだが、そもそも2回ソートが行われるのが何故なのかがわからない・・・
これはApp Directoryでは消え去ったShallow Routingの機能が再度使えるようになれば動く気がするのだが…しばらくは入らなさそう?

Shallow routing on Next.js 13's next/navigation · vercel/next.js · Discussion #48110 · GitHub

Shallow routing on Next.js 13's next/navigation

github.com

og image
自分がSSGでのサーバーコンポーネントの処理を全然理解していないため何か変なことを言っている可能性は高い