NextJS 13.4~ app router 副作用のあるレイアウトはtemplate.tsxを使おう

App Router の共通レイアウト定義における二つのファイル名

• layout.tsx
• template.tsx

この二つの違いと性質についてまとめてみます

コンポーネント内でuseEffectを使いたい場合

template.tsxを使用

layout.tsxは内部でuseEffectを持つことができないようです。
副作用がある処理をしたい場合、app routerの機構に従うとtemplate.tsxを使うのが適切なようです。

副作用のない純粋なUIをレンダリングしたい場合

layout.tsxを使用

副作用を持たない純粋関数として定義できるUIを定義したい場合はlayout.tsxが良さそうです。
基本、layout.tsxに関する記述が多いように見受けられますが、実務上はtemplate.tsxの方が使用する機会が多い気がします（WEB開発の場合）。

WEB制作の場合は逆にtemplate.tsxを使う機会は少ないかもしれません。

※公式ドキュメントにもtempalte.tsxの挙動については明言されてなかったので、現状動作確認した限りで分かったことを記載しました