Server-side rendering (SSR) & Client-side rendering (CSR) ?

Server side rendering là gì ?

Đây là một phương pháp render truyền thống, tất cả các tài nguyên dữ liệu sẽ được lưu trữ trên server, khi có yêu cầu truy cập vào server sẽ trả về tài nguyên bao gồm Html, Css, Js sau đó hiển thị nội dung lên phía client.

Điểm mạnh

Vì render phía server nên tất cả mọi dữ liệu sẽ được xử lý phía máy chủ, phía client chỉ thực hiện nhận thông tin và hiển thị lên. Phần lớn các framework đều hỗ trợ cơ chế SSR này điển hình như NextJS, NuxtJS,…

Được đánh giá khá cao trong việc Seo bởi render nội dung và trả về phía client đầy đủ thông tin cùng 1 lúc khiến crawler của của Seach engine có thể tiếp cận được ngay lập tức.

Điểm yếu

Điểm yếu lớn nhất của SSR đó là trải nghiệm người dùng bởi ví dụ khi chuyển page thì website phải tải lại và render lại toàn bộ khiến UX bị giảm đáng kể.

Từ việc phải render lại cũng khiến tiêu tốn nhiều băng thông và render lại những phần k cần thiết đó là các dữ liệu bị trùng hoặc thừa sau mỗi lần render lại.

Client side rendering là gì ?Chúng ta có thể hiểu nôm na đó là việc thực hiện xử lý dữ liệu trước khi render ra giao diện cho người dùng bao gồm call Api, biên dịch Html, Css, Js, xử lý các logic hiển thị,… đều thực hiện phía client.

Các framework, thư viện phổ biến cho SCR đó là: React, Vue, Angular,…

Điểm mạnh

Điều đầu tiên tất nhiên là ngược lại với SSR là về trải nghiệm UX của người dùng tăng lên khá nhiều, vì là render phía client nên mọi thay đổi đều dễ ràng xử lý hiển thị phía client sẽ không phải load lại toàn bộ page khi có thay đổi cập nhật mà chỉ cập nhật thay đổi đúng vị trí DOM có dữ liệu thay đổi đó.

Ví dụ khi bạn comment và nhấn gửi lên thì dữ liệu của bạn sẽ được thay đổi và hiển thị lại luôn lên phần chat mà k cần phải reload lại page mới có thể đọc được vì nó chỉ re-render đúng phần có thay đổi mà k phải toàn bộ page đó. Việc đó sẽ khiến trải nghiệm người dùng tăng lên đáng kể và sẽ tối đa được tài nguyên.

Điểm yếu

Điểm yếu lớn nhất đó chính là Seo bị ảnh hưởng, bởi render phía client khiến crawler của của Seach engine khó có thể tiếp cận được.

Tải lần đầu khá lâu vì client phải tải 1 cục Javascript về, sau đó chạy JS để DOM và gọi API, rồi mới render ra HTML.