Trong bài viết này, tôi sẽ cố gắng xem xét vấn đề SSR và CSR mà tôi đã thảo luận trước đó một cách chi tiết hơn. Tôi sẽ giải thích các phương pháp kết xuất trong một bài viết.

Trong bài viết này, tôi sẽ xem xét bài viết Rendering on Web của Jason Miller và Addy Osmani và cố gắng giải thích chủ đề này.

Bài viết này dựa trên bài viết của tôi Nên kết xuất HTML ở đâu? mà tôi đã viết cách đây một thời gian. Mọi chuyện bắt đầu bằng câu hỏi trong bài đăng trên blog.

Khi phát triển một trang web, có khả năng thực hiện logic và hiển thị ở nhiều nơi khác nhau. Các nhà phát triển sẽ quyết định lựa chọn phương pháp nào khi có nhiều phương pháp khác nhau để phát triển một trang web?

Để đưa ra quyết định này, các nhà phát triển cần hiểu rõ về Phương pháp kết xuất và những đánh đổi về hiệu suất.

A. Kết xuất

Nếu bạn đang thắc mắc chủ đề kết xuất là gì. Bạn có thể đọc thông tin chi tiết trong bài đăng trên blog nơi tôi đã giải thích chủ đề này
.

B. Web tĩnh và Web động

Một điều nữa cần hiểu là sự khác biệt giữa Web tĩnh và Web động . Trang web tĩnh là những trang không quay trở lại máy chủ và thực hiện yêu cầu bằng AJAX sau khi lấy trang từ máy chủ (HTML, CSS, JS), nội dung của chúng không thay đổi theo người dùng hoặc không chứa dữ liệu động (tỷ giá hối đoái, thời tiết, v.v.) do dữ liệu trong đó thay đổi. Ví dụ như blog, tin tức, v.v. Ngược lại, các trang động là các trang web yêu cầu AJAX, API, Cơ sở dữ liệu, v.v. trong đó nội dung trang thay đổi theo khoảng thời gian và các tham số được gọi.

C. Điều khoản hiệu suất

• TTFB (Thời gian đến Byte đầu tiên) Khoảng thời gian giữa lúc nhấp vào liên kết và nhận được bit nội dung đầu tiên.
• FP (First Paint): Thời gian cần thiết để hiển thị pixel đầu tiên cho người dùng.
• FCP (First Contentful Paint): Thời gian hiển thị nội dung logic đầu tiên trong yêu cầu.
• TTI Thời gian tương tác Thời gian khi trang sẵn sàng tương tác với người dùng (kết nối tất cả các sự kiện)

• SSR (Server Side Rendering): Đây là phương pháp trong đó quá trình kết xuất được thực hiện ở phía máy chủ và các trang động được tạo ra bằng cách truy xuất chúng từ cơ sở dữ liệu bằng các phương pháp như ASP.Net, JSP, PHP. Ở đây, vì JS sẽ có vai trò ít hơn nhiều trong việc tạo màn hình nên FP và FCP sẽ rất nhanh, trong khi thời gian để dữ liệu đến từ máy chủ sẽ lâu hơn trong TTFB .
• CSR (Client Side Rendering): Đây là phương pháp kết xuất được thực hiện ở phía trình duyệt bằng các phương pháp như Angular, React, Vue, Svelte, các trang động được kéo bằng AJAX và màn hình được tạo trên màn hình bằng cách kết hợp Mẫu + Dữ liệu với phương pháp Kết xuất Mẫu. Với phương pháp này, ngay cả khi chúng ta thực hiện TTFB và FP nhanh hơn, chúng ta vẫn không thể tăng tốc TTI, tức là thời gian người dùng tương tác với trang web có liên quan.
• Kết xuất tĩnh: Trong phương pháp này được sử dụng cho các trang tĩnh, vì các trang thay đổi rất ít và không cần cơ sở dữ liệu, các trang được đưa đến trạng thái cuối cùng bằng phương pháp kết xuất trước khi được gửi đến máy chủ và được gửi đến CDN hoặc môi trường lưu trữ đệm biên và được phục vụ rất nhanh từ đó. Gần đây, việc tạo ra những trang như thế này trở nên dễ dàng hơn nhiều bằng các công cụ Gatsby và Jekyll. Trên những trang này, cả thời gian của TTFB và TTI đều khá ngắn. Nhu cầu thực thi hoặc tương tác JS của những trang như vậy rất thấp và hạn chế.
• Kết xuất kết hợp: Mặc dù việc tạo SSR cho một số trang theo tải nội dung của chúng là hợp lý, nhưng việc tạo một số trang có tải cao bằng CSR lười biếng cũng hợp lý. Các khuôn khổ như Next, Nuxt, Nest, Sapper đã xuất hiện để hỗ trợ những tình huống như vậy. Khung này có khả năng tương tự khi áp dụng phương pháp phát triển thành phần Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte trong quá trình phát triển mã.

Tài liệu tham khảo

• Hiển thị trên Web
• Sự khác biệt giữa trang web tĩnh và trang web động
• Nên thực hiện kết xuất HTML ở đâu?

Bạn có thể nhấp vào liên kết này để truy cập phần tiếp theo của bài viết này hoặc các bài viết khác trong nhóm bài viết .