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