Hiển thị là quá trình tạo mã cần thiết để tạo một trang mà người dùng cuối có thể tương tác thông qua trình duyệt. Công đoạn này bao gồm việc chuẩn bị nội dung, áp dụng logic và xử lý, cũng như bao gồm mọi thành phần trên giao diện người dùng và các thành phần bắt buộc khác cần thiết để hiển thị trang cuối cùng. Các ứng dụng dựa trên nội dung tập trung vào tốc độ tải nhanh, độ trễ thấp và thời gian kết xuất nhanh.
Hiển thị phía máy chủ (SSR)
Tính năng hiển thị phía máy chủ (SSR) liên quan đến việc hiển thị các trang web trên máy chủ, sau đó gửi HTML được kết xuất hoàn chỉnh đến trình duyệt của ứng dụng thay vì hiển thị các trang đó ở phía máy khách bằng JavaScript. Khi người dùng truy cập vào một ứng dụng, trình duyệt của họ sẽ gửi một yêu cầu đến máy chủ. Ứng dụng xử lý yêu cầu trên máy chủ, bao gồm cả việc thu thập dữ liệu từ cơ sở dữ liệu hoặc API bên ngoài, sau đó hiển thị HTML cho trang được yêu cầu. Sau đó, máy chủ sẽ gửi HTML đã hiển thị đầy đủ của trang trở lại trình duyệt của người dùng. Khi trình duyệt của người dùng nhận được HTML, trình duyệt sẽ tải mọi tệp JavaScript cần thiết.
Lợi ích của việc sử dụng SSR: tốc độ tải ban đầu nhanh, hiệu suất tối ưu hoá cho công cụ tìm kiếm (SEO) tốt, độ tin cậy và trải nghiệm tổng thể tốt cho người dùng. Tuy nhiên, việc triển khai SSR có thể phức tạp hơn so với phương thức hiển thị phía máy khách (CSR) do chi phí hiệu suất và kỹ năng phát triển cần thiết để xây dựng và duy trì các ứng dụng hỗ trợ SSR. SSR đặc biệt có lợi cho các ứng dụng web dựa trên nội dung, nền tảng thương mại điện tử và bất kỳ ứng dụng nào đòi hỏi hiệu suất SEO cao và tốc độ phản hồi ban đầu nhanh.
Tạo trang web tĩnh (SSG)
Tạo trang web tĩnh (SSG) sẽ tạo các tệp HTML tĩnh tại thời điểm xây dựng và phân phối các tệp đó cho người dùng mà không cần kết xuất phía máy chủ hoặc phía máy khách. Nội dung web được tạo, thường ở định dạng có cấu trúc như Markdown, JSON hoặc YAML, đồng thời bao gồm văn bản, hình ảnh và các tài sản khác. Một công cụ tạo trang web tĩnh, chẳng hạn như Hugo hoặc Jekyll, sẽ xử lý nội dung và tạo các tệp HTML, CSS và JavaScript. Đầu ra tĩnh là toàn bộ trang web và những tệp tĩnh này được triển khai đến máy chủ web, CDN hoặc dịch vụ lưu trữ.
Tìm hiểu thêm về CSS và HTML tại web.dev.
Vì các tệp ở dạng tĩnh nên chúng có thể được lưu vào bộ nhớ đệm và do đó tải rất nhanh. SSG là một lựa chọn phù hợp cho các ứng dụng web không thay đổi thường xuyên hoặc những ứng dụng được cập nhật thông qua các bản dựng trang web định kỳ. Đây không phải là lựa chọn phù hợp cho các ứng dụng web có tính tương tác động.
Hiển thị phía máy khách (CSR)
Hiển thị phía máy khách (CSR) xảy ra trên trình duyệt của ứng dụng chứ không phải trên máy chủ. Các ứng dụng web thường được tải ở các mẫu HTML tối thiểu, sau đó nội dung sẽ được điều khiển linh hoạt bằng JavaScript và dữ liệu từ máy chủ hoặc API. Sau khi có yêu cầu về ứng dụng, máy chủ sẽ gửi một tài liệu HTML tối thiểu có cấu trúc cơ bản và mã JavaScript cần thiết để kết xuất trang. Mã JavaScript được thực thi trong trình duyệt của người dùng. Sau đó, mã này sẽ xử lý dữ liệu đã tìm nạp và tạo nội dung, bao gồm CSS, HTML và tất cả các phần tử tương tác. Sau đó, mã JavaScript sẽ phản hồi hoạt động tương tác của người dùng, chẳng hạn như việc gửi biểu mẫu.
Lợi ích của CSR bao gồm chuyển tiếp trang nhanh chóng và giao diện phản hồi nhanh. Các ứng dụng web dựa trên CSR thường có thời gian tải ban đầu chậm so với SSR và có thể gây ra thách thức về SEO. Khi các ứng dụng CSR ngày càng phát triển, việc phát triển và duy trì chúng có thể trở nên khá phức tạp.