nextjsのURL設計

テーマ、知りたいこと

nextjs app routerでISG+CSRにしてアプリを作っています。
認証が必要なページのURL設計はどんな感じがいいんでしょうか?
チュートリアルなどでもそうであるように、今は(auth)/posts/[postId]みたいな感じで作っています。

このダイナミックルートにアクセスすると、ログイン中かつそのユーザーの保有するpostだったらレンダリングするという流れで、npm run build時にはこのページは生成されずISGで訪れたときに生成して中身をcsrでレンダリングします。

ただこれってなんかISGにする意味がないんじゃないかと思ってるんですけどどうなんでしょうか?
/posts/postをSSGで生成して中身は/posts/post?id=postidというクエリで判断するみたいな感じだと総合build回数が減りますよね。(ユーザー数✖️post数)
本アプリの設計的には毎日ユーザーは1〜10postほど行います

しかし一般的なURL設計ではパスはリソースでクエリは絞り込みであるというのがベストプラクティスであり、/posts/[postId]が推奨されますよね。

バックエンドのAPIに関しては、もちろんそんな事情は知らないので/posts/[postId]で実装されておりこのままでいいと思っています。

背景、状況

最近Youtube見ていて気になったのですが、
昔はyoutube.com/qwertyuiopみたいなURLでしたけど
今見たらyoutube.com/watch?v=qwertyuiop
みたいにパスからクエリに変更されていました。

例えばteratailだとteratail.com/questions/qwertyuiopという風にパスで与えられています。
これはページごとに生成してキャッシングしておくことでページスピードの向上やSEOのためだと思います。
またログインしなくても誰でも閲覧できるのでCSRの必要もありません。

一方でyoutubeの場合、ログインしなくても動画を閲覧できるので動的に生成しなくてもいいんじゃないでしょうか?
動的に生成するとbuild時はクエリ情報を持っていないのでクライアント側で動画データを取りに行く必要があります。
しかも動画なのでbuild時にキャッシングしておいた方が効率的な気がします。

※あくまで両サイトともnextjsで設計されていると仮定します

コメントを投稿

0 コメント