Next.js là gì?

• Next.js là một framework mã nguồn mở được phát triển bởi Vercel dành cho React.
• Nó được thiết kế để đơn giản hóa quá trình xây dựng các ứng dụng web động, tối ưu hóa SEO, và đảm bảo hiệu suất cao.
• Next.js hỗ trợ các loại render khác nhau, từ Static Site Generation (SSG), Server-Side Rendering (SSR), đến Client-Side Rendering (CSR).
• Đặc biệt, Next.js còn tích hợp các tính năng tối ưu hóa tự động cho hình ảnh, code splitting, và cấu hình sẵn cho các kỹ thuật tối ưu SEO.

Cách hoạt động của Next.js

Next.js sử dụng ba phương pháp render chính (SSG, SSR và CSR) để tạo trang tùy thuộc vào nhu cầu của ứng dụng. Đây là cách hoạt động cụ thể của từng phương pháp:

1. Static Generation (SSG) - Tạo trang tĩnh khi build

• Next.js tạo các trang tĩnh trong quá trình build ứng dụng.
• Điều này giúp trang tải nhanh vì không cần xử lý yêu cầu từ server mỗi lần người dùng truy cập.
• SSG là lý tưởng cho các trang mà dữ liệu không thay đổi thường xuyên, như trang giới thiệu, blog, hoặc trang sản phẩm.
• Ví dụ: getStaticProps và getStaticPaths được sử dụng để lấy dữ liệu và tạo trang tĩnh trước khi triển khai.

2. Server-Side Rendering (SSR) - Render trên server mỗi khi có yêu cầu

• Mỗi khi có yêu cầu, server sẽ render lại trang, đảm bảo dữ liệu luôn cập nhật.
• SSR thích hợp cho các trang yêu cầu dữ liệu mới nhất, ví dụ như trang tin tức, mạng xã hội, hay trang giao dịch.
• Ví dụ: getServerSideProps được sử dụng để lấy dữ liệu ngay tại thời điểm người dùng truy cập.

3. Client-Side Rendering (CSR) - Render phía client sau khi tải trang

• Một số phần của ứng dụng có thể chỉ render phía client sau khi tải trang lần đầu.
• Phương pháp này thường áp dụng cho các thành phần không cần tối ưu SEO hoặc chỉ cần cập nhật một phần nội dung động.
• Ví dụ: Dùng React hooks như useEffect để lấy dữ liệu hoặc cập nhật dữ liệu trực tiếp trên client.