Next.js 15 mang đến nhiều cải tiến vượt trội, đặc biệt là khả năng tương tác với database một cách hiệu quả. Bài viết này FPT Polytechnic TP HCM sẽ đi sâu vào các phương thức lấy dữ liệu từ database trong Next.js 15, bao gồm: Lấy trực tiếp từ database trong Server Component; Lấy dữ liệu thông qua fetch API trong Server Component; Lấy dữ liệu thông qua fetch API trong Client Component.
Lấy dữ liệu trực tiếp trong Server Component
Do code NextJS cũng chạy trên Server , nên trong NextJS bạn có thể code lấy trực tiếp database với các module tương tác database quen thuộc như mysql, Prisma, Sequelize, Mongoose…
Lấy kiểu này đơn giản , trực quan, không cần API trung gian, nhưng chỉ dùng trong Server Component, không có tương tác client-side. Sau đây là ví dụ lấy dữ liệu từ MySQL với Sequelize:
- Cài đặt module: npm install sequelize pg-hstore mysql2
- Tạo file app/san-pham/page.tsx và code:
// app/san-pham/page.tsx
import { Sequelize } from "sequelize";
const sequelize = new Sequelize("laptop_node", "root", "",
{ host: "localhost", dialect: "mysql", dialectModule: require('mysql2')}
);
export default async function SP() {
let sql = 'SELECT * FROM san_pham ORDER BY ngay DESC LIMIT 0, 10'
const [sp_arr] = await sequelize.query(sql);
return (
<div id="listsp">
{sp_arr.map( (sp:any) => <div key={sp.id}> {sp.ten_sp} </div>)}
</div>
)}
Lấy dữ liệu thông qua Fetch API trong Server Component
Ngoài cách tương tác trực tiếp với database trên server. Bạn cũng có thể thực hiện call api nhưng là call trên server. Lấy kiểu này quen thuộc, có thể call API bên ngoài, nhưng nếu nguồn API bị lỗi thì khó biết chuyện gì xảy ra. Sau đây là code call api chạy trên server lấy dữ liệu:
// app/products/page.tsx
"use server"
export default async function ProductsPage() {
const res = await fetch("https://fakestoreapi.com/products");
const products = await res.json();
return (
<div>
{products.map((product: any) =>
<div key={product.id}>
{product.title}
</div>
)}
</div>
)}
Lấy dữ liệu thông qua fetch API trong Client Component
Dùng lệnh fetch trong trình duyệt để call api đến server là cách rất phổ biến. Cách này có ưu điểm là có thể fetch theo sự kiện của người dùng , nhưng nhược điểm là Không tối ưu SEO vì dữ liệu chỉ tải khi client render.
//app/sp/page.tsx
"use client";
import { useEffect, useState } from "react";
export default function ProductsPage() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch("https://fakestoreapi.com/products")
.then( res => res.json() )
.then( data => setProducts(data) )
}, []);
return (
<div>
{products.map((product: any) =>
<div key={product.id}>
{product.title}
</div>
)}
</div>
)}
Tóm tắt các phương thức lấy dữ liệu
| Phương Thức | Khi Nào Dùng? | SEO | Hiệu Suất |
|---|---|---|---|
| Lấy trực tiếp trong Server Component | Dữ liệu tĩnh, không cần tương tác người dùng. | Tốt | Nhanh |
| Lấy dữ liệu qua fetch API trong Server Component | Lấy dữ liệu từ API bên ngoài. | Tốt | Nhanh |
| Gọi API trong Client Component | Dữ liệu động, thay đổi theo hành động người dùng. | Không tốt | Chậm hơn |
Lựa chọn phương thức phù hợp
- Sử dụng Server Component cho dữ liệu tĩnh, không cần cập nhật theo hành động người dùng.
- Sử dụng Client Component cho dữ liệu động, cần cập nhật theo thời gian thực hoặc hành động người dùng.
- Khi sử dụng API bên ngoài thì có thể dùng fetch trong Server Component hoặc Client Component.
Next.js 15 cung cấp nhiều phương thức linh hoạt để lấy dữ liệu từ database, giúp bạn xây dựng ứng dụng web hiệu quả và tối ưu. Việc lựa chọn phương thức phù hợp phụ thuộc vào yêu cầu cụ thể của từng dự án.
Giảng viên Nguyễn Văn Long
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
