[Next.js]Layout和Template的区别

2 年 ago

雅, 悟

1 minute

首先

我总结了一下Layout和Template的区别。

巨大的区别 de

在画面切换时，有两个主要的区别，一个是布局（Layout）不会被重新渲染，而模板（Template）会被重新渲染。

去实际验证一下

我想动手写代码来验证一下。
我准备了以下的代码。

"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>
  );
}

"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>
  );
}

打开画面时，可以看到两者都已经渲染出来。
然后，准备以下的代码。

"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>
    </>
  );
}