Layouts và Templates trong Nextjs14

Xin chào mọi người, trong bài viết ngày hôm nay mình xin được giới thiệu đến mọi người một chủ đề mới trong bản update của Nextjs từ phiên bản 13 lên phiên bản 14, đó là 2 khái niệm Layouts và Templates. Đây là hai khái niệm quan trọng và có vai trò khác nhau trong việc quản lý cấu trúc và bố cục của các trang web mà có thể các bạn đã từng gặp và code ra chính các thành phần này để sử dụng trong dự án Nextjs của mình. Hiểu về nó cũng là cách giúp cho chúng ta có thể tận dụng được những ưu điểm nổi bật của 2 thành phần này giúp cho trang web của chúng ta tối ưu và nhanh hơn. Thôi không lan man nữa, chúng ta cùng đến với phần tìm hiểu ngay sau đây…

Layouts trong Next.js

Layouts được sử dụng để chia sẻ và quản lý cấu trúc chung của các trang trong một ứng dụng Nextjs. Chúng giúp tạo ra một lớp bố cục bao quanh (wrapper) chung cho các trang, cho phép bạn áp dụng các thành phần cố định như header, footer, và navigation bar cho nhiều trang khác nhau mà không cần lặp lại mã.

Đặc điểm chính của Layouts:

1. Tái sử dụng cấu trúc trang: Layouts giúp tái sử dụng các phần chung của trang web, giảm thiểu việc lặp lại mã.
2. Quản lý dễ dàng: Thay đổi một thành phần trong layout sẽ ảnh hưởng đến tất cả các trang sử dụng layout đó.

Nhìn vào hình ảnh trên chúng ta có thể mường tượng được bố cục của một trang web và phần layouts đang được xác định chính là phần Header mà xanh dương và phần Navigation Bar màu tím nằm bên trái. Hai thành phần này luôn cố định mỗi khi trang web điều hướng và phần thay đổi nội dung khác nhau chính là phần ở giữa màu xám. Cho nên chúng ta sẽ chủ ý không muốn cho Header và Navigation Bar bị render lại mỗi lần điều hướng, như thế sẽ ảnh hưởng đến hiệu suất và trải nghiệm người dùng đối với trang web của mình. Và Layouts đã xử lý cho chúng ta vấn đề này.

Templates trong Next.js

Templates cũng giống với Layouts, nó là một lớp bố cục bao quanh (wrapper) chung cho các trang nhưng điểm khác biệt của Templates lại là:”Layouts thì duy trì trạng thái, không render lại mỗi khi trang điều hướng còn Templates thì lại render lại và tạo một instance mới cho mỗi thành phần con của nó.

Ví dụ để chúng minh cho những luận điểm được nêu ở bên trên:

Khởi tạo giao diện các trang điều hướng

Trong thư mục app tạo một thư mục User với tệp tin page.tsx để xây dựng trang User:

export default function UserPage() {
  return <h1>User</h1>;
}

Tiếp theo ta khởi tạo một thư mục Product với tệp tin page.tsx cho trang Product:

export default function ProductPage() {
  return <h1>Product</h1>;
}

Thiết lập file layout.tsx

"use client";
import Link from "next/link";
import { useEffect } from "react";

export default function Layout({ children }) {
  useEffect(() => {
    console.log("layout mounted");
  }, []);
  return (
    <div>
      <nav>
        <Link href="/user">User</Link>
        <Link href="/product">Product</Link>
      </nav>
      {children}
    </div>
  );
}

Khi chạy đoạn code trên và theo dõi console trên trình duyệt chúng ta có thể thấy đoạn text log “layout mounted” chỉ được log ra lúc component render lần đầu tiên và mỗi khi điều hướng qua lại giữa 2 trang User và Product thì đoạn text đó không còn được log lại nữa

Bây giờ chúng ta cùng đổi tên file từ layout.tsx sang template.tsx để sử dụng thành phần Templates xem có gì khác biệt

Chúng ta có thể thấy, mỗi lần chúng ta điều hướng qua lại giữa 2 trang User và Product thì console lại xuất hiện dòng text “layout mounted”, như thế component đã bị render lại sau mỗi lần điều hướng trang.

Như vậy qua ví dụ trên chúng ta có thể hiểu được cách hoạt động của cả 2 thành phần Layouts và Templates và chắc hẳn các bạn cũng đã hình dung ra là nên sử dụng thành phần nào cho trường hợp nào rồi nhỉ, nói chung cả 2 thành phần đều có điểm mạnh và lợi ích riêng khi ta dùng trong trang web. Còn tùy vào trường hợp, tùy vào tính huống mà bạn gặp phải để các bạn quyết định xem nên sử dụng thành phần nào.

Với mình thì mặc định mình sẽ sử dụng layouts vì những lợi ích mang lại về hiệu suất và giúp quản lý trạng thái tốt hơn, đặc biệt là đối với các thành phần tĩnh và nhất quán trên các trang như Header, Footer,… Trong khi đó, templates là lựa chọn hàng đầu để tạo ra các thành phần độc lập với trạng thái, nơi mà hiệu ứng và khởi tạo trạng thái cần thay đổi và xảy ra trên mỗi lần điều hướng trang.

Tổng kết

• Layouts: Dùng để quản lý các thành phần chung và cấu trúc tổng thể của các trang web. Thường áp dụng cho toàn bộ hoặc nhiều trang (Không bị render lại).
• Templates: Dùng để định hình và trình bày dữ liệu động cho các trang cụ thể, thường dùng khi các trang có cấu trúc tương tự nhưng với nội dung khác nhau (Bị render lại).

Hiểu rõ sự khác biệt giữa Layouts và Templates sẽ giúp bạn tổ chức mã nguồn một cách hiệu quả và dễ dàng quản lý các trang trong ứng dụng Next.js của mình.

Cám ơn mọi người đã theo dõi. Hy vọng bài viết sẽ giúp ích cho mọi người trong quá trình làm việc hiện tại và tương lai. Love u so much!!