Partial Prerendering: Tương lai của SSR trên Next.js

Bạn đã bao giờ cảm thấy bối rối khi phải chọn giữa SSR (Server‑Side Rendering) nhanh chóng nhưng tốn tài nguyên và SSG (Static Site Generation) nhẹ nhưng không cập nhật kịp thời? Next.js vừa ra mắt một giải pháp trung gian mang tên Partial Prerendering, hứa hẹn sẽ thay đổi cách chúng ta tối ưu hiệu năng và SEO cho các ứng dụng React phức tạp.

SSR truyền thống và những giới hạn

Server‑Side Rendering đã là trụ cột cho SEO và thời gian tải đầu tiên (TTFB) nhanh. Tuy nhiên, khi mỗi yêu cầu đều phải chạy toàn bộ logic trên server, chi phí và độ trễ tăng cao, đặc biệt với các trang có lượng truy cập lớn.

“SSR tốt nhất khi nội dung luôn thay đổi, nhưng lại không phải là lựa chọn tối ưu cho các phần tĩnh ổn định.” – một chuyên gia Next.js.

Incremental Static Regeneration (ISR) và SSG

Next.js đã giới thiệu ISR để cập nhật nội dung tĩnh sau khi trang đã được xây dựng. Điều này giúp giảm tải server, nhưng ISR vẫn đòi hỏi toàn bộ trang phải được tái tạo, không linh hoạt cho những trang có một phần nội dung thay đổi liên tục.

Partial Prerendering: Khái niệm và nguyên tắc

Partial Prerendering (PR) cho phép prerender một phần của cây component, trong khi các phần còn lại vẫn được render trên server tại thời gian thực. Ý tưởng chính:

• Xác định các khu vực tĩnh (ví dụ: header, footer, menu) và prerender chúng khi build.
• Đánh dấu các khu vực động (ví dụ: dữ liệu người dùng, danh sách thời gian thực) để render trên server khi có request.

Cách Next.js triển khai Partial Prerendering

Next.js 14+ cung cấp API mới export const runtime = 'edge' kết hợp với fetch có next: { revalidate: false } để bỏ qua ISR cho các phần nhất định. Một ví dụ ngắn gọn:

// pages/dashboard.tsx
export const runtime = 'edge'; // chạy trên Edge Runtime

export async function getServerSideProps(context) {
  // Phần dữ liệu người dùng luôn dynamic
  const user = await fetch(`https://api.example.com/user/${context.params.id}`, {
    next: { revalidate: false } // không cache
  }).then(res => res.json());

  // Phần menu tĩnh, sử dụng ISR
  const menu = await fetch('https://api.example.com/menu', {
    next: { revalidate: 3600 } // cache 1h
  }).then(res => res.json());

  return { props: { user, menu } };
}

Trong ví dụ trên, menu được prerender và cache, còn user luôn được fetch realtime.

Lợi ích thực tiễn của Partial Prerendering

• Tốc độ tải nhanh: Phần tĩnh được phục vụ ngay từ CDN, giảm TTFB đáng kể.
• SEO ổn định: Các thành phần quan trọng cho crawlers đã được prerender.
• Tiết kiệm chi phí: Server chỉ xử lý phần dynamic, giảm tải tính toán.
• Độ linh hoạt cao: Dễ dàng mở rộng cho các trang có mix content.

Khi nào nên áp dụng Partial Prerendering? – Hướng dẫn nhanh

1. Trang có phần tĩnh lớn (header, footer, navigation) nhưng các khu vực nội dung thay đổi thường xuyên.
2. Ứng dụng SaaS với dashboard cá nhân hoá cho mỗi người dùng.
3. Landing pages cần SEO mạnh nhưng có form hoặc chat widget dynamic.
4. E‑commerce có catalog tĩnh nhưng giỏ hàng và đề xuất thời gian thực.

Nếu đáp ứng hai trong ba tiêu chí trên, Partial Prerendering là lựa chọn đáng cân nhắc.

Ví dụ thực tế: Blog đa ngôn ngữ

Giả sử chúng ta có một blog hỗ trợ đa ngôn ngữ, trong đó phần bài viết thay đổi ít, còn phần bình luận luôn dynamic.

// pages/blog/[slug].tsx
export const runtime = 'edge';

export async function getStaticProps({ params }) {
  const post = await fetch(`https://cms.example.com/posts/${params.slug}`, {
    next: { revalidate: 86400 } // cache 24h
  }).then(r => r.json());

  return { props: { post } };
}

export async function getServerSideProps({ params }) {
  const comments = await fetch(`https://api.example.com/comments/${params.slug}`, {
    next: { revalidate: false }
  }).then(r => r.json());

  return { props: { comments } };
}

Kết quả: Khi người dùng truy cập bài viết, tiêu đề, nội dung, hình ảnh được phục vụ ngay từ CDN, còn bình luận được tải ngay trên server, đảm bảo luôn cập nhật.

Kết luận

Partial Prerendering không chỉ là một tính năng mới, mà còn là cầu nối giữa SSR và SSG, giúp các nhà phát triển Next.js cân bằng giữa hiệu năng, chi phí, và SEO. Khi bạn có một trang với sự kết hợp giữa nội dung tĩnh và động, hãy cân nhắc triển khai PR để tận dụng tối đa lợi thế của cả hai thế giới.

Bước tiếp theo? Thử áp dụng PR trên một dự án hiện tại, đo lường thời gian tải và chi phí server, rồi so sánh với cách triển khai truyền thống. Khi kết quả thực tế chứng minh sự cải thiện, bạn sẽ hiểu tại sao Partial Prerendering đang nhanh chóng trở thành tương lai của SSR trên Next.js.