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

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

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

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

以下のような画面になります。
![スクリーンショット 2023-12-02 10.48.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/da080de9-d01d-2f7c-6487-01504c7378dd.png)

画面を開いた時は、どちらもレンダリングされていることがわかります。
続いて、以下のコードを用意します。
![img](/mosaic-code.jpg)
これは、dashboardの詳細ページを用意し、ページ遷移することができるリンクを設置したコードです。
表示画面とコンソールは以下のようになります。
![スクリーンショット 2023-12-02 10.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/332a2153-cb38-57f5-9a7a-eb8bab07af36.png)

コンソール↓
![スクリーンショット 2023-12-02 10.52.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0ed7d112-db94-6f6a-ceb0-25ec71f262d2.png)

リンクを押して画面遷移してみます。
![スクリーンショット 2023-12-02 10.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/bb9c480c-aa2b-9fc0-c68b-330a9a7ff366.png)

コンソールを確認します。
![スクリーンショット 2023-12-02 10.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2e9cc93d-4d87-61dc-342f-70488143d625.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]

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

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

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

```dashboard/layout.tsx
"use client";

import React, { useEffect } from "react";

export default function Layout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    console.log("Layoutレンダリング");
  }, []);
  return (
    <div>
      <h2>Layout Header</h2>
      {children}
    </div>
  );
}

```

```dashboard/template.tsx
"use client";

import React, { useEffect } from "react";

export default function Template({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    console.log("Templateレンダリング");
  }, []);
  return (
    <div>
      <h2>Template Header</h2>
      {children}
    </div>
  );
}


```

以下のような画面になります。
![スクリーンショット 2023-12-02 10.48.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/da080de9-d01d-2f7c-6487-01504c7378dd.png)

画面を開いた時は、どちらもレンダリングされていることがわかります。
続いて、以下のコードを用意します。
```dashboard/[slug]/page.tsx
"use client";

import Link from "next/link";

export default function Page({ params }: { params: { slug: string } }) {
  return (
    <>
      <div>dashboard: {params.slug}</div>
      <Link href={`/dashboard/${Number(params.slug) + 1}`}>Go to next page</Link>
    </>
  );
}

```
これは、dashboardの詳細ページを用意し、ページ遷移することができるリンクを設置したコードです。
表示画面とコンソールは以下のようになります。
![スクリーンショット 2023-12-02 10.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/332a2153-cb38-57f5-9a7a-eb8bab07af36.png)

コンソール↓
![スクリーンショット 2023-12-02 10.52.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0ed7d112-db94-6f6a-ceb0-25ec71f262d2.png)

リンクを押して画面遷移してみます。
![スクリーンショット 2023-12-02 10.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/bb9c480c-aa2b-9fc0-c68b-330a9a7ff366.png)

コンソールを確認します。
![スクリーンショット 2023-12-02 10.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2e9cc93d-4d87-61dc-342f-70488143d625.png)
すると、templateはレンダリングされましたが、Layoutはレンダリングされていないことが確認できました。

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

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

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

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

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

大きな違い

実際に確かめてみる

続きは、単価診断を受けたエンジニア限定で公開中（30秒）

続きは、
単価診断を受けたエンジニア限定で公開中（30秒）