nextjs
しゅんsingle page aplication
browserが最初にserverから全ページ読み込む
ページ遷移をjavascriptで行う
ページ遷移時にserverからの再読み込みが不要
初回読み込みが遅い
しゅんClient Side Navigation
初回接続時に必要なページしか読み込まない
→初回ロードが早い
prefetches
<Link>タグで繋がってるページを事前に読み込んでる
ページ遷移をjavascriptで行うことが可能
ページ遷移時にserverからの再読み込みが不要
<a>ではなく<Link>を使用するよう意識する
事前に読み込んでるならspaと一緒じゃね？
しゅんNextjsでのhistoryの使い方
事前知識
そもそも何
ページ遷移に使うやつ
コンポーネント跨いでルーティングする
historyは、コンポーネントの切り替えの履歴をもってるオブジェクト
最初に見つけたそれっぽい記事のまとめ
react-routerのページ
react-routerで生成されるパス(例えば/と/about)は同じ1つのページを指す
Single Page Application
Next.jsにおける/pagesの概念
Next.jsでは/pagesに存在しているファイルたちはコンポーネントを出し分けるために存在するわけではなく、一つ一つが単一のエンドポイントとして存在する(ファイル同士が関連することはない）
エンドポイント間でhistoryオブジェクトを景趣した履歴スタックの受け渡しはできない。(/id/:userSlug内のreact-routerと/id/:userSlug/connections内のreact-routerはお互いを認識しない)
一般的なSPA的遷移の実装方法
- 同一ページ内で
- コンポーネントの切り替えを行う実装を用意し
- コンポーネントの切り替え時にHistoryオブジェクトを変更してあげる
しゅんrouter.push({
pathname: '/companies',
query: {
...router.query,
q: searchWord,
},
});
Component内で router.push 使ってしまうと使いにくかったりしませんか？👀
絶対にそのページに飛ぶなら別ですが
確かに使い回す時に使いにくくなりそうです。。
コンポーネント間のcompaniesデータの共有はstore経由にする形はいかがでしょうか
storeのcompanyリストを、絞り込みボタン押下時にフィルタされたものに更新する方法です
updateCompaniesメソッドをstoreに新設します
また、article-searchを参考に作ったのですが、そちらとの懸念点の違いが分からず教えていただけませんでしょうか
。
確かに使い回す時に使いにくくなりそうです。。
コンポーネント間のcompaniesデータの共有はstore経由にする形はいかがでしょうか
storeのcompanyリストを、絞り込みボタン押下時にフィルタされたものに更新する方法です
updateCompaniesメソッドをstoreに新設します
やるならcompany-search を使う側で history 操作するだけで良いかと思いました
また、article-searchを参考に作ったのですが、そちらとの懸念点の違いが分からず教えていただけませんでしょうか
。
「絶対にそのページに飛ぶなら別ですが」 の部分次第かと
本来であれば article-search も history操作は外出しするのがComponent設計的には良いと思います。ですが企業ページ内でしか使わないComponentとかでrouter.push での遷移先が自明なのであれば許容しても良いかと思います🙆♂️