Next.js Roadmap • Week 1 Day 3

Templates vs
Layouts.

เจาะลึกความแตกต่างในการทำงานระหว่าง template.tsx และ layout.tsx โดยเฉพาะพฤติกรรมการ Re-mount และการเก็บรักษา State

Layouts

layout.tsx

Preserve
  • No Re-mount: เมื่อเปลี่ยนหน้า Component จะไม่ถูกสร้างใหม่
  • Keep State: สถานะต่างๆ (เช่น ค่าใน Input) จะยังคงอยู่เหมือนเดิม
  • Performance: ทำงานได้เร็วกว่าเพราะไม่ต้อง Render ส่วนเดิมซ้ำ

Templates

template.tsx

Re-mount
  • Force Re-mount: สร้าง Instance ใหม่เสมอเมื่อมีการเปลี่ยนหน้า (Navigate)
  • Reset State: ล้าง State เก่าทิ้งทั้งหมด และเริ่มนับวงจรชีวิตใหม่
  • Trigger Effects: useEffect จะทำงานใหม่ทุกครั้งที่เปลี่ยน Route

When to use Templates?

แม้ว่า Layout จะเป็นทางเลือกหลักในการทำโครงสร้าง UI (เพราะประสิทธิภาพดีกว่า) แต่ Template จะมีประโยชน์มากในกรณีเฉพาะเหล่านึ้:

Enter/Exit Animations

เมื่อใช้ Library อย่าง Framer Motion และต้องการให้ Animation เล่นใหม่ทุกครั้งที่ผู้ใช้เปลี่ยนหน้า (Page Transitions)

Features relying on `useEffect`

เช่น การส่งข้อมูล Page View Analytics เมื่อโหลดหน้าใหม่, หรือการส่ง Logging ต่อการเปลี่ยนหน้า

Resetting Form State

เมื่อต้องการล้างค่าตัวแปร State (เช่น ฟอร์มแสดงความคิดเห็น) อัตโนมัติเวลาเปลี่ยนหน้า

The Hierarchy

หากในโฟลเดอร์มีทั้ง layout.tsx และ template.tsx โครงสร้างการ Render จะเป็น Layout ครอบ Template อีกทีหนึ่ง ดังโครงสร้างตัวอย่างด้านล่าง

React Component Output Tree
<Layout> // ไม่ถูกสร้างใหม่
  <Template key={routeParam}> // รีเซ็ตใหม่และเปลี่ยน Key ตาม Route เสมอ
    <ErrorBoundary>
      <Suspense>
        <Page />
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>
Recommendation

ใน Next.js แนะนำให้ใช้ Layout เป็นค่าเริ่มต้นเสมอ เพราะมีประสิทธิภาพสูงกว่า (หลีกเลี่ยงการ Render ที่ไม่จำเป็น) และให้เปลี่ยนไปใช้ Template ต่อเมื่อคุณต้องการพฤติกรรมการ Re-mount เพื่อรีเซ็ต State/Effects จริงๆ เท่านั้น