Next.js 2023: Không Chỉ Là “Update”, Mà Là “Cách Mạng”!
“Chào anh em!” 👋 Năm 2023 đánh dấu một bước ngoặt lớn của Next.js với sự ra mắt của App Directory (Beta), React Server Components, và data fetching mới. Những thay đổi này không chỉ là “update” đơn thuần, mà là một cuộc “cách mạng” thực sự, thay đổi cách chúng ta xây dựng ứng dụng web. Bài viết này sẽ cùng các bạn “đập hộp” những tính năng mới “nóng hổi” này và xem chúng “xịn” đến mức nào nhé!
1. Bối Cảnh Trước Sự Ra Mắt 2023
Trước khi 2023 tới, quá trình phát triển ứng dụng web với Next.js đã rất tuyệt vời: chúng ta có SSR, SSG, Automatic Routing – những tính năng mạnh mẽ giúp xây dựng các trang web tương tác, nhanh chóng và thân thiện với SEO. Dù tốt thế này, Next.js vẫn chưa ngơi yên, luôn theo đuổi sự đổi mới. Đó chính là sức mạnh của một framework “đứng đầu” thế giới lập trình web.
2. Những Tri Điểm Nổi Bật Của 2023
App Directory (Beta): “Đập Đi Xây Lại” Cấu Trúc Dự Án! 💥
Như đã đề cập trong bài viết năm 2022, hôm nay chúng ta sẽ cùng nhìn lại và khám phá những thay đổi mới của App Directory trong năm 2023. Cụm từ “Đập đi xây lại” có vẻ như gây lo ngại, nhưng thực chất đây lại là một bước tiến quan trọng đối với Next.js. App Directory (vẫn đang trong giai đoạn Beta) cung cấp một cách tổ chức mã nguồn mới, linh hoạt hơn và hiện đại hơn so với thư mục pages truyền thống.
Điểm “ăn tiền” của App Directory:
- Layouts: Dễ dàng định nghĩa layout chung cho các route, tránh code trùng lặp.
- Server Components: Render components phía server, giảm tải cho client, “tăng tốc” load trang.
- Streaming: Truyền tải dữ liệu “mượt mà” hơn, cải thiện trải nghiệm người dùng.
- Colocation: Đặt code, styles, tests… ngay cạnh component, “gọn gàng” và dễ quản lý.
Ví dụ về cấu trúc thư mục:
app/
├── about/
│ ├── page.tsx // /about
│ └── layout.tsx // Layout cho /about
├── dashboard/
│ ├── settings/
│ │ └── page.tsx // /dashboard/settings
│ ├── analytics
│ │ └── page.tsx // /dashboard/analytics
│ └── layout.tsx // Layout cho /dashboard
├── (marketing)/
│ ├── layout.tsx // Layout cho nhóm (marketing)
│ ├── layout.tsx
│ └── page.tsx // / (trang chủ)
├── (shop)/
│ ├── cart/
│ │ └── page.tsx // /(shop)/cart
│ └── layout.tsx // Layout cho nhóm (shop)
├── components // Các component dùng chung
├── lib // Các hàm tiện ích
└── types // Định nghĩa kiểu dữ liệu
Cách dùng Layouts:
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
<h1>Dashboard</h1>
{/* Sidebar, header, etc. */}
<section>{children}</section>
</div>
);
}
3.1 APP DIRECTORY: “Phục Vụ Trực Tiếp?”
Lợi ích của App Directory không chỉ nằm ở việc tổ chức code mà còn hiệu quả trong việc phục vụ, giúp mã code chạy hiệu quả hơn. Với việc chức năng Layout, nó giúp xây dựng các phần của website mà không cần lặp lại, tiết kiệm thời gian và công sức hơn bao giờ hết.
3.2 SERVER COMPONENTS: “Ráp Chạy Trên Server”
Server Components giúp giảm tải cho client bằng cách render một phần UI trên server, việc này giúp cải thiện hiệu suất đáng kể. Tính năng này mở ra nhiều khả năng mới như việc truy cập cơ sở dữ liệu trực tiếp từ server mà không cần thông qua API. Nhờ đó, data được fetch tẩy lớp mà không cần thực hiện các bước trung gian, giảm đáng kể thời gian phản hồi và cải thiện trải nghiệm người dùng.
React Server Components: “Server-Side” Ngay Trong Component! 🤯
Đây là một “cú nổ” lớn trong cộng đồng React. Server Components cho phép bạn render component ngay trên server, giảm lượng JavaScript cần tải xuống client, từ đó cải thiện hiệu suất đáng kể.
Lợi ích:
- Giảm kích thước bundle: Loại bỏ code không cần thiết khỏi client bundle.
- Truy cập trực tiếp tài nguyên back-end: Fetch data trực tiếp từ database, file system, microservices,… mà không cần thông qua API.
- Bảo mật tốt hơn: Giữ logic nhạy cảm (như API keys) ở phía server.
Ví dụ:
// app/components/ProductList.tsx (Server Component)
import { db } from "@/lib/db"; // truy cập trực tiếp database, không qua API
export default async function ProductList() {
const products = await db.query("SELECT * FROM products"); // truy vấn trực tiếp từ database
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
);
}
Lưu ý: Server Components vẫn đang trong giai đoạn thử nghiệm. Một trong những thách thức đầu tiên khi sử dụng Server Components là việc giới hạn về khả năng độ phức tạp của code được run trên server, do đó việc lựa chọn kỹ lưỡng về nghiệm nhận trách nhiệm giữa server và client trở nên rất quan trọng.
4.1 Server Components: “Đầy Cụm Động Vật”
Một trong những điểm mạnh đáng kể của Server Components là khả năng xử lý các tác vụ phức tạp mà không gây tắc nghẽn client. Sử dụng server để thực hiện các tác vụ như xử lý dữ liệu, render bố cục phức tạp hoặc thực hiện các hoạt động thời gian thực giúp giảm lượng đáng kể lượng công việc cần làm cho client và nâng cao hiệu suất tổng thể của ứng dụng.
4.2 FROM CLIENT-SIDE ĐẾN SERVER-SIDE
Chuyển đổi từ việc render component hoàn toàn ở phía client sang một phần được xử lý ở phía server giúp ngăn chặn việc load toàn bộ ứng dụng cần thiết và làm giảm kích thước file gửi đến khách hàng, từ đó nâng cao tốc độ tải trang và trải nghiệm người dùng.
Data Fetching: “Tất Cả Trong Một” Với fetch
Next.js 2023 “nâng cấp” fetch API với các tính năng:
- Automatic Request Deduplication: Tránh fetch trùng lặp dữ liệu.
- Data Caching: Tự động cache dữ liệu, “tăng tốc” load trang.
- Revalidation: Cập nhật dữ liệu linh hoạt (tương tự ISR).
- Streaming: Truyền dữ liệu ngay khi có, không phải chờ toàn bộ phản hồi từ server.
Ví dụ:
// app/page.tsx
async function getProducts() {
const res = await fetch("https://.../products", { next: { revalidate: 60 } });
return res.json();
}
export default async function Page() {
const products = await getProducts();
return (
<ul>
{products.map((product) => {
return (
<li key={product.id}>
<h3>{product.name}</h3>
</li>
);
})}
</ul>
);
}
5.1 Tự Động Lọc Các Yêu Cầu: Đúng Như Tôi Đã Bắt Đầu Thực Hiện!
Automatic Request Deduplication giúp giảm lượng xử lý cần thiết, tránh việc yêu cầu dữ liệu bị lặp lại. Việc này không chỉ tối ưu hóa hiệu suất mà còn giúp giảm tải cho server.
5.2 Cache Dữ Liệu: Smart hơn Nữa
Một trong những điểm đáng chú ý khác là khả năng tự động caching dữ liệu. Điều này giúp giảm thiểu lượng công việc cần thực hiện mỗi khi truy cập trang web, từ đó nâng cao hiệu suất âm thanh và trải nghiệm người dùng.
5.3 Cập Nhật Dữ Liệu: Flexibility và Đúng Mục Đích!
Tính năng cập nhật dữ liệu linh hoạt với việc sử dụng revalidate giúp đảm bảo rằng dữ liệu của bạn luôn được cập nhật mới mà không cần lo lắng về việc đồng bộ hóa.
3. Khởi Tạo Dự Án Next.js 2023: “Chào Mừng” App Directory!
Để tạo dự án Next.js với App Directory, hãy dùng lệnh:
npx create-next-app@latest my-next-app --experimental-app
cd my-next-app
npm run dev
Đơn giản như vậy, bạn đã có một dự án sử dụng App Directory. Trong quá trình khởi tạo, những cấu trúc thư mục, file cần thiết sẽ được tự động tạo ra, giúp giảm bớt công sức làm việc.
4. Một Số Tính Năng Cập Nhật Khác
4.1 Route Group
Route Group cho phép tính năng nhóm các route lại với nhau, giúp định nghĩa các khu vực riêng biệt cho các nhóm chức năng cụ thể. Tính năng này hỗ trợ tổ chức code tốt hơn, giúp dễ dàng bảo trì và mở rộng ứng dụng.
Ví dụ về cấu trúc thư mục:
app/
├── (marketing)/
│ ├── layout.tsx // Định nghĩa layout cho marketing
│ ├── page.tsx // Trang chính marketing
│ └── about.tsx // trang giới thiệu của marketing
└── (shop)/
├── layout.tsx // Định nghĩa layout cho shop
├── page.tsx // Trang chính shop
└── product.tsx // Trang thông tin sản phẩm
4.2 Client Component: Hình Thức Hiệu Năng Mới
Sự bổ sung vào Client Component giúp tăng cường khả năng xử lý các tác vụ phía client một cách hiệu quả hơn. Client Component kết hợp với Server Component tạo nên một cách tiếp cận đầy đủ về việc phân chia công việc giữa server và client, giúp tối ưu hóa hiệu suất ứng dụng.
Ví dụ:
// app/components/ProductDetail.tsx (Client Component)
"use client";
import { useState, useEffect } from "react";
export default function ProductDetail({ productId }) {
const [product, setProduct] = useState(null);
useEffect(() => {
// Call API to fetch product detail
fetch(`/api/products/${productId}`)
.then((res) => res.json())
.then((data) => setProduct(data));
}, [productId]);
if (!product) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
</div>
);
}
5. Kết Luận: Next.js “Đã Xịn Nay Còn Xịn Hơn”!
Next.js 2023 thực sự là một “bước nhảy vọt” với App Directory, React Server Components, và data fetching mới. Những cải tiến này giúp cho việc phát triển ứng dụng web trở nên “mượt mà”, “hiệu quả” và “xịn sò” hơn bao giờ hết. Hãy “lên đời” Next.js ngay và “trải nghiệm” những tính năng “đỉnh cao” này nhé!
6. Những Giới Thiệu Thêm
Những cải tiến lớn này chắc chắn đã gây được sự chú ý của cộng đồng lập trình viên, hãy tham khảo thêm các nguồn sau đây để nắm bắt kỹ lưỡng hơn các tính năng mới từ Next.js 2023:
Chúc các bạn có một kỳ nghỉ hè thư giãn và đầy ý nghĩa! 🎉🌞