Rendering on the Web

Terminology

Rendering

Server-side rendering (SSR)

Rendering ứng dụng tại server để gửi HTML hoàn chỉnh tới browsers thay vì chỉ gửi JS

Client-side rendering (CSR)

Rendering ứng dụng tại browser, sử dụng JS để thao tác và cập nhật DOM

Rehydration

Quá trình “khởi động” lại các view Javascript trên client để sử dụng lại DOM và dữ liệu đã render từ server

Prerendering

Rendering ứng dụng ở thời điểm build để tạo ra các file HTML tĩnh

Performance

Time to first byte (TTFB)

Thời gian từ lúc người dùng nhấn vào link đến khi nhận được byte đầu tiên của nội dung

First Contentful Paint (FCP)

Thời điểm nội dung đầu tiên xuất hiện ở màn hình

Interaction to Next Paint (INP)

Đo lường khả năng phản hồi nhanh với thao tác người dùng

Total Blocking Time (TBT)

Tổng thời gian main thread bị block trong quá trình tải trang

Server-side rendering

SSR tạo HTML đầy đủ trên máy chủ khi có yêu cầu, giúp giảm số lượng JS gửi đến client và tối ưu các chỉ số FCP, TBT, INP

💡

Ưu điểm: Nội dung hiển thị nhanh, phù hợp với nhiều điều kiện thiết bị và mạng, tối ưu SEO

Nhược điểm: Thời gian tạo trang trên server có thể tăng TTFB, không phù hợp với mọi loại ứng dụng

Có thể kết hợp SSR với caching để tối ưu thời gian phản hồi, hoặc chỉ dùng SSR cho các trang cần cá nhân hóa nội dung

Static rendering

Diễn ra ở thời điểm build, tạo ra các file HTML tĩnh cho từng URL

💡

Ưu điểm: FCP, TTFP, TBT, INP đều nhanh và ổn định, dễ dàng phân phối qua CDN

Nhược điểm: Không linh hoạt với các page động hoặc có số lượng URL lớn, khó dữ đoán trước

Client-side rendering

Toàn bộ quá trình render diễn ra trên browser, mọi logic, fetch dữ liệu, routing đều xử lý phía client

💡

Ưu điểm:

Nhược điểm:

Lượng JS lớn, dễ làm giảm hiệu năng trên thiết bị yếu, khó tối ưu SEO, FCP và INP có thể bị ảnh hưởng nếu không tối ưu tốt

Rehydration (Kết hợp SSR và CSR)

Trang được render trên server, sau đó client-side JS “nhặt lại” DOM và dữ liệu để trang trở nên tương tác

💡

Ưu điểm

Nhược điểm

Có thể làm tăng TBT và INP do phải tải và thực thi nhiều JS trước khi trang thực sự tương tác được. Nếu không tối ưu, trang trông như đã sẵn sàng nhưng thực tế chưa thể thao tác được

Các kĩ thuật nâng cao và kết hợp

Streaming SSR

Gửi HTML theo từng phần giúp trình duyệt hiển thị sớm hơn, cải thiện FCP

Progressive/ Partial Rehydration

Chỉ “Khởi động” dần các phần cần thiết trên trang, giảm lượng JS cần thiết và cải thiện hiệu năng

Trisomorphic rendering

Kết hợp server, client và service worker để tối ưu render và cache cho các lần truy cập tiếp theo

So sánh, trade-off và ứng dụng thực tế

SSR phù hợp với trang cần SEO, nội dung tĩnh hoặc ít tương tác

CSR phù hợp với úng dụng nhiêu tương tác, SPA, nhưng phải tối ưu kỹ để tránh giảm hiệu năng

Static rendering tối ưu nhất cho website tĩnh, blog, landing page

Hybrid/ re-hydration phù hợp với ứng dụng lớn, cần cân bằng giữa tốc độ tải và tính động

Lưu ý về SEO

SSR thường được ưu tiên cho SEO vì crawler dễ dàng đọc nội dung HTML hoàn chỉnh

CSR có thể làm SEO khó khăn hơn, cần kiểm tra kỹ

Có thể cân nhắc dynamic rendering hoặc các giải pháp hybrid nếu ứng dụng phụ thuộc nhiều vào JS phía client

💡

Kết luận

Không có giải pháp render nào là tối ưu cho mọi trường hợp. Cần đo lường, hiểu rõ bottleneck của dự án để chọn phương pháp phù hợp

Nên ưu tiên SSR hoặc static rendering nếu có thể, giảm thiểu lượng JS gửi đến client để tối ưu trải nghiệm người dùng

Loading content...