【ISSUE】[Next.js]LayoutとTemplateの違い

0

2024年12月23日 8:40

はじめに

LayoutとTemplateの違いについてまとめてみました。

大きな違い

2つの大きな違いとしては、画面遷移時にLayoutは再レンダリングがされませんが、Templateはされます。

実際に確かめてみる

実際にコードを書いて確かめてみようと思います。
以下のコードを用意します。

img

img

以下のような画面になります。
スクリーンショット 2023-12-02 10.48.34.png

画面を開いた時は、どちらもレンダリングされていることがわかります。
続いて、以下のコードを用意します。
img
これは、dashboardの詳細ページを用意し、ページ遷移することができるリンクを設置したコードです。
表示画面とコンソールは以下のようになります。
スクリーンショット 2023-12-02 10.52.47.png

コンソール↓
スクリーンショット 2023-12-02 10.52.18.png

リンクを押して画面遷移してみます。
スクリーンショット 2023-12-02 10.55.01.png

コンソールを確認します。
スクリーンショット 2023-12-02 10.54.07.png
すると、templateはレンダリングされましたが、Layoutはレンダリングされていないことが確認できました。

 # 感想
基本的には、パフォーマンスの最適化の観点から、Layoutを使用するのがいいと思います。
ですが、例として、画面遷移時に何かしらのイベント(アニメーションをつけたい場合など)はTemplateを使用してもいいのかなと思いました。

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。