Giới thiệu ISR và Cache trong NextJS

Incremental Static Regeneration (ISR) cho phép tạo trang tĩnh sau khi triển khai và cập nhật lại khi dữ liệu thay đổi mà không cần rebuild toàn bộ site. Kết hợp ISR với các header cache-control giúp giảm thời gian phản hồi và tăng điểm SEO.

Cấu hình ISR trong getStaticProps

Đặt revalidate để chỉ định thời gian (giây) giữa các lần tái tạo. Khi thời gian này hết, NextJS sẽ tự động gọi lại getStaticProps trên server và cập nhật cache nội bộ.

export async function getStaticProps(context) {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();
    return {
        props: { posts },
        revalidate: 60 // tái tạo mỗi 60 giây
    };
}

Thêm header Cache-Control

Trong pages/api hoặc middleware, trả về header Cache-Control để cho CDN và trình duyệt lưu trữ bản HTML tĩnh.

export default function handler(req, res) {
    res.setHeader('Cache-Control', 'public, max-age=0, s-maxage=60, stale-while-revalidate=30');
    // trả về dữ liệu JSON hoặc HTML
    res.status(200).json({ message: 'OK' });
}

Sử dụng next/cache API

NextJS 15 cung cấp unstable_cache (được đổi tên thành cache trong phiên bản ổn định) để lưu trữ kết quả hàm bất đồng bộ trên server.

import { cache } from 'next/cache';

const fetchPosts = cache(async () => {
    const res = await fetch('https://api.example.com/posts');
    return res.json();
});

export async function GET() {
    const posts = await fetchPosts();
    return new Response(JSON.stringify(posts), {
        headers: { 'Content-Type': 'application/json' }
    });
}

Lợi ích

• Giảm số lần gọi API tới nguồn dữ liệu gốc.
• Tối ưu băng thông CDN nhờ nội dung đã được cache.
• Cải thiện thời gian tải trang (TTFB) và điểm Core Web Vitals.

Kết hợp ISR với next/image và next/font

Đảm bảo hình ảnh và font được tối ưu trước khi trang được tạo tĩnh. Sử dụng next/image với loader tùy chỉnh để nén ảnh trên CDN.

import Image from 'next/image';

function Post({ post }) {
    return (
        

            
{post.title}
            
            
{post.content}
        
    );
}

Kết luận

Áp dụng ISR, header Cache-Control và API cache nội bộ giúp NextJS 15 đạt hiệu năng cao, giảm tải server và cải thiện SEO. Để học sâu hơn và thực hành qua dự án Notion Clone, Tham khảo khóa học "Lập trình Front-End với NextJS + TypeScript" tại đây.