Tương tác với database từ NextJS có 3 cách chính, đó là tương tác trực tiếp database, bằng cách fetch trên server, hoặc fetch từ client. Đây là bài hướng dẫn về các phương thức ấy, bao gồm:
- Tương tác database trong Server Component
- Tương tác database thông qua fetch trong Server Component
- Tương tác database bằng cách fetch API trong Client Component
Các phương thức tương tác với database từ NextJS
Next.js 15 hỗ trợ Server Component , nghĩa là code chạy trước trên server, cho nên bạn có thể tương tác trực tiếp ngay đến database trong NextJS. Framework này cũng còn cho phép bạn một cách khác nữa đó là fetch API chạy trên server. Và cách cuối cùng là fetch api từ client trong javascript của trình duyệt. Như vậy có 3 phương thức rương tác với database từ NextJS.
Nói rõ là trong 1 dự án Next, bạn muốn lấy data từ database ở đâu thì tùy : lấy từ server, lấy từ client. Mời xem tiếp để biết nhé.
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 trong database với các module tương tác database quen thuộc như 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>
)}
Trong code trên laptop_node là tên database, root là username kết nối đến database.
Dễ quá phải không nào. Nếu không thích sequelice có thể dùng mudule khác, quan trọng là NextJS cho phép bạn làm điều đó.
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ệnh fetch như trên được viết trong Server Component (use server) nên nó chạy trên server, chứ không phải ở phía client (trình duyệt). Lấy kiểu này đơn giản mà rất tốt cho SEO
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: 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>
)}
Khi fetch ở client, code phức tạp hơn 1 chút. Vì bạn phải gán kết quả vào 1 biến state (products) , để khi biến state này thay đổi thì component render lại. Nhờ đó bạn mới thấy được dữ liệu mới đổ về.
📌 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 | Khi cần dữ liệu từ database mà không có tương tác người dùng | ✅ Tốt | ⚡ Nhanh |
| Lấy dữ liệu qua fetch API trong Server Component | Khi lấy dữ liệu từ API bên ngoài | ✅ Tốt | ⚡ Nhanh |
| Gọi API trong Client Component | Khi dữ liệu thay đổi theo hành động người dùng | ❌ Không tốt | 🐢 Chậm hơn |
Khi nào dùng cách nào?
- Dùng Server Component nếu dữ liệu không cần cập nhật theo hành động người dùng.
- Dùng Client Component nếu dữ liệu cần cập nhật động (thời gian thực, user action).
- Nếu API bên ngoài, dùng fetch trong Server Component hoặc gọi API từ Client Component.
Xem thêm các link này nhé https://nextjs.org/docs/app/building-your-application/data-fetching/fetching
