Tìm hiểu về CSR, SSR, SSG, và ISR trong việc phát triển Website

Trong thế giới ngày nay của phát triển web, việc lựa chọn mô hình rendering là một quyết định quan trọng đối với nhà phát triển. Theo Terus Bốn khái niệm quan trọng này bao gồm Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), và Incremental Static Regeneration (ISR). Mỗi khái niệm đều mang lại những ưu và nhược điểm riêng, và việc hiểu rõ về chúng giúp đưa ra quyết định đúng đắn trong quá trình phát triển ứng dụng web.

I. Các mô hình rendering

1. Client-Side Rendering (CSR)

Client-Side Rendering là một mô hình phát triển web mà trong đó đoạn code HTML được render trực tiếp trên trình duyệt của người dùng bằng JavaScript. Phương pháp này tăng cường tương tác và giảm tải cho máy chủ, vì máy chủ chủ yếu phục vụ dữ liệu gốc. Trong đó, trình duyệt web sẽ ban đầu tải một tệp HTML trống. Sau đó, JavaScript và các kiểu được tải chịu trách nhiệm hiển thị trang đầy đủ và thân thiện với người dùng trong trình duyệt web.

Cách CSR hoạt động: Khi tải một trang, trình duyệt của người dùng truy xuất HTML và JavaScript tối thiểu. JavaScript truy xuất dữ liệu và chuyển thành các components. Tuy nhiên, SEO không tốt trong trường hợp này do công cụ tìm kiếm gặp khó khăn trong việc tìm chỉ mục do JavaScript render nội dung.

2. Server-Side Rendering (SSR)

Server-Side Rendering là quá trình render HTML trực tiếp trên server trước khi trang web được gửi đến trình duyệt của người dùng. Thay vì chờ đến khi code JavaScript tải xong như CSR, người dùng sẽ nhận được HTML đã render từ trước.

Cách SSR hoạt động: Khi người dùng gửi requests đến một trang, máy chủ truy xuất dữ liệu cần thiết và tạo nội dung HTML. Trang được render sau đó được gửi đến máy khách (client). Mặc dù có nhiều lợi ích, nhưng SSR có thể mang lại những thách thức liên quan đến tải tài nguyên và truy xuất dữ liệu phức tạp từ máy chủ.

Terus

Thiết kế website

Thiết kế website bán hàng

dịch vụ SEO

3. Static Site Generation (SSG)

Static Site Generation là mô hình render trang web tĩnh tại thời điểm xây dựng. Trong quá trình xây dựng, các trang web được tạo ra dưới dạng các tập tin HTML tĩnh mà không cần server để render khi người dùng truy cập.

Cách SSG hoạt động: Trong giai đoạn xây dựng, ứng dụng tạo file HTML cho mỗi trang. Những file tĩnh này sau đó được phục vụ cho người dùng, giảm thiểu cần thiết phải render từ phía máy chủ và truy vấn cơ sở dữ liệu.

4. Incremental Static Regeneration (ISR)

Incremental Static Regeneration kết hợp các yếu tố của Server-Side Rendering (SSR) và Static Site Generation (SSG). Nó cho phép chúng ta tạo trước các trang tĩnh trong quá trình xây dựng, đồng thời định kỳ tái tạo lại các trang cụ thể với dữ liệu đã được cập nhật.

Cách ISR hoạt động: Các trang tĩnh được tạo ra trong quá trình xây dựng và các trang động được tái tạo một cách từng bước dựa trên kích thước xác định. Chiến lược này cân bằng lợi ích của nội dung tĩnh và cập nhật dữ liệu thời gian thực.