Server-Side Rendering (SSR) là một kỹ thuật trong phát triển web, nơi các trang web được tạo (render) trên máy chủ (server) thay vì trên trình duyệt của người dùng. Khi người dùng yêu cầu một trang, máy chủ sẽ xử lý mã nguồn, tạo ra một tệp HTML hoàn chỉnh, và gửi tệp đó về trình duyệt.
Cơ chế hoạt động
- Yêu cầu từ người dùng: Trình duyệt gửi một yêu cầu HTTP đến máy chủ để truy cập một trang web.
- Máy chủ xử lý: Thay vì chỉ gửi một tệp HTML trống rỗng và các tệp JavaScript, máy chủ chạy mã ứng dụng, lấy dữ liệu cần thiết (từ cơ sở dữ liệu hoặc API), và tạo ra một trang HTML đầy đủ, đã được “điền” nội dung.
- Máy chủ gửi phản hồi: Tệp HTML hoàn chỉnh này được gửi về trình duyệt của người dùng.
- Trình duyệt hiển thị: Trình duyệt nhận tệp HTML và hiển thị ngay lập tức, giúp người dùng thấy nội dung trang web nhanh chóng. Sau đó, các tệp JavaScript sẽ được tải xuống và “hồi sinh” trang web, làm cho nó trở nên tương tác được (quá trình này gọi là hydration).
So sánh với Client-Side Rendering (CSR)
Để hiểu rõ hơn về SSR, bạn nên so sánh nó với CSR – kỹ thuật phổ biến được sử dụng bởi các framework như React, Vue, hoặc Angular.
- Client-Side Rendering (CSR):
- Cơ chế: Máy chủ chỉ gửi một tệp HTML rất nhỏ và các tệp JavaScript. Trình duyệt phải tải JavaScript, sau đó chạy mã để dựng (render) giao diện người dùng và lấy dữ liệu.
- Ưu điểm: Tốt cho các ứng dụng web phức tạp, nơi người dùng tương tác nhiều. Các lần chuyển trang sau đó thường nhanh hơn vì không phải tải lại toàn bộ trang.
- Nhược điểm: Tốc độ tải trang ban đầu chậm vì phải chờ JavaScript được tải và thực thi. Khó khăn cho SEO vì các công cụ tìm kiếm có thể gặp vấn đề khi lập chỉ mục nội dung không có sẵn ngay trong HTML.
- Server-Side Rendering (SSR):
- Cơ chế: Như đã mô tả ở trên, máy chủ gửi HTML đã có nội dung.
- Ưu điểm:
- Tăng tốc độ tải trang ban đầu: Người dùng thấy nội dung trang web gần như ngay lập tức.
- Tối ưu SEO: Các công cụ tìm kiếm có thể dễ dàng lập chỉ mục nội dung vì tất cả thông tin đều có sẵn trong tệp HTML.
- Nhược điểm:
- Tải trọng máy chủ: Máy chủ phải xử lý nhiều hơn cho mỗi yêu cầu.
- Độ phức tạp: Việc thiết lập và quản lý SSR có thể phức tạp hơn CSR.
Khi nào nên sử dụng SSR?
SSR đặc biệt hiệu quả cho các trang web mà tốc độ tải trang ban đầu và SEO là yếu tố quan trọng hàng đầu, chẳng hạn như:
- Các trang tin tức, blog.
- Các trang thương mại điện tử.
- Các trang có nội dung công cộng, cần được tìm thấy trên Google.
Các framework như Nuxt.js (cho Vue) và Next.js (cho React) được xây dựng để đơn giản hóa quá trình phát triển ứng dụng sử dụng kỹ thuật SSR, giúp các lập trình viên dễ dàng tận dụng ưu điểm của nó.
« Back to Glossary Index