SSR (Server-Side Rendering) trong Next.js là gì?

SSR (Server-Side Rendering) là phương thức render HTML trên server tại thời điểm request, rồi gửi HTML đã hoàn thiện về cho browser. Browser nhận được nội dung có thể hiển thị ngay mà không cần chờ JavaScript chạy xong trên client.

Bạn có thể hình dung như nhà hàng — SSG nấu sẵn món trước khi khách tới, còn SSR nấu món ngay khi khách gọi. Mỗi yêu cầu có thể nhận kết quả khác nhau vì server truy cập dữ liệu mới nhất mỗi lần.

Cơ chế trong Next.js: Khi cấu hình SSR, server thực hiện render component tree, gọi API hoặc truy vấn database (nếu cần), rồi serializer output thành HTML. Browser nhận HTML render sẵn, hiển thị nội dung gần như tức thì, trong khi JavaScript bundle vẫn tiếp tục load ở background để "hydrate" — gắn sự kiện tương tác lại vào DOM.

Trong App Router (Next.js 13+), Server Components mặc định được prerender tĩnh nếu route là static; chỉ khi route dùng dynamic APIs (ví dụ cookies(), headers(), searchParams) hoặc được cấu hình dynamic thì mới render lại trên server ở từng request (dynamic rendering/SSR). Nếu bạn cần client-side rendering trong App Router, thêm directive "use client" ở đầu file.

Trong Pages Router (vẫn được hỗ trợ từ Next.js 13 trở đi), SSR được kích hoạt bằng cách export hàm getServerSideProps từ file page:

// pages/profile/[id].tsx
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/user/${context.params.id}`);
  const user = await res.json();
  return { props: { user } };
}

export default function Profile({ user }) {
  return <h1>{user.name}</h1>;
}

SSR phù hợp khi: nội dung phụ thuộc vào request (dựa trên cookie, auth state, query param), hoặc dữ liệu thay đổi thường xuyên theo từng user. SEO cũng được hưởng lợi vì crawler nhận HTML đầy đủ.

Edge case hay gặp: SSR tăng TTFB (time to first byte) so với SSG vì server phải render trước khi trả lời. Nếu logic render phức tạp hoặc API chậm, thời gian phản hồi sẽ bị ảnh hưởng trực tiếp. Cần cân nhắc kết hợp caching (ví dụ revalidate trong App Router) để giảm tải server.

Lưu ý: SSR ≠ CSR (Client-Side Rendering). CSR gửi JavaScript bundle lên browser rồi render ở client — SEO kém hơn vì crawler có thể không chờ JS chạy. SSR và SSG đều tạo HTML trên server, nhưng SSG làm lúc build time còn SSR làm lúc request time.