ReactJs CSR vs ReactJs SSR. What to choose and when to choose? | Question -  Goodfirms
Render với Server và Client.

SSR là viết tắt của Server side rendering (render ở phía server) còn CSR là Client side rendering (render ở phía client). Cả hai đều là cơ chế dùng để trả về một trang web hoàn chỉnh, được hiển thị trên trình duyệt sau khi được người dùng yêu cầu. Ở phần này, chúng ta sẽ cùng tìm hiểu cách thức render của chúng, đồng thời so sánh SSR và CSR.

1. Server side rendering

Server Side Rendering vs Client Side Rendering | Infidigit
Các bước rendering phía Server.

Đây là cách thức ra đời trước và được sử dụng khá phổ biến, nhất là với trình duyệt Google. Các bước rendering cụ thể như trên được thực hiện chủ yếu ở server, sau đó mới trả về client. Hiểu một cách ngắn gọn:

  1. Người dùng gửi yêu cầu mở một trang web => trình duyệt gửi GET request tới web server.
  2. Web server nhận được request => đọc dữ liệu từ database.
  3. Web server phản hồi bằng việc render HTML trả về trình duyệt để hiển thị những thông tin của trang web được người dùng yêu cầu.

2. Client side rendering

Server Side Rendering vs Client Side Rendering | Infidigit
Các bước rendering phía Client.

CSR ra đời sau SSR để giải quyết một vài bất cập ở SSR (theo xu hướng thì các trang web không chỉ phát triển theo kiểu website tin tức thông thường, mà đang trở thành những web app, điều khiến cho SSR trở nên không thân thiện hơn với trình duyệt). Ngược lại với SSR, CSR thực hiện rendering chủ yếu ở phía client thông qua các bước cụ thể như trên hình. Hiểu ngắn gọn:

  1. Người dùng gửi request tới webiste => một CDN có thể được sử dụng để gửi HTML, CSS và các file hỗ trợ cho người dùng.
  2. Người dùng thấy một biểu tượng loading, tức trình duyệt đang tải HTML CSS và JS.
  3. Trình duyệt tạo các yêu cầu API (qua Ajax) để lấy dữ liệu về, sau đó trả về một trang web hoàn chỉnh nội dung.

3. So sánh SSR và CSR

SSRCSR
Các xử lí logic (1)Ở server sideỞ client side
Thời gian load lần đầu (2)Nhanh hơnChậm hơn
Thời gian load các lần sau (3)Chậm hơnNhanh hơn
Caching (4)Yếu thế hơnLợi thế hơn
SEO (5)Lợi thế hơnYếu thế hơn
Bảng so sánh tóm tắt giữa SSR và CSR.

Mục (1) chúng ta đã tìm hiểu ở trên, nên bây giờ chúng ta sẽ cùng nhau lần lượt tìm hiểu các mục còn lại.

Cơ chế rendering ảnh hưởng trực tiếp đến việc load lần đầu (2) của trang. Trong khi CSR phải đợi tất tần tật HTML, CSS và JS về rồi mới kết hợp chúng để hiển thị trang mà người dùng yêu cầu thì SSR chỉ cần hiển thị phần HTML và script đã được biên dịch sẵn trên server.

Và cũng chính vì lí do trên mà trong các lần load sau (3), CSR đã lật kèo và trở nên ưu thế hơn. Mọi thông tin đều đã được chuẩn bị tươm tất nên với CSR, khi mà trang web có sự thay đổi dẫn đến load tiếp tục thì không mất quá nhiều thời gian. Trong khi SSR lại một lần nữa thực hiện các bước tuần tự như ban đầu.

Caching (4) là cơ chế được sử dụng để tăng tốc các ứng dụng nặng. CSR có lợi thế hơn do cách thức load toàn bộ nội dung ngay lần đầu tiên. Còn SSR đòi hỏi gửi yêu cầu lên server liên tục làm tăng thời gian load trang.

Bù lại, quá trình crawlers lại “ưu ái” SSR hơn CSR. Lí do là CSR đi kèm với việc chạy đồng thời javascript khi trang web đang được quét, còn SSR thì không. SSR cung cấp metadata chính xác cho trình duyệt, trở nên thân thiện với SEO (5) hơn.

4. Kết luận

SSR và CSR đều có những điểm mạnh và điểm yếu riêng. Tùy vào dự án hay mục đích sử dụng mà bạn có thể lựa chọn một trong hai cách thức này. Mong rằng qua bài viết, bạn sẽ hiểu hơn về SSR và CSR. Cảm ơn bạn vì đã ủng hộ Hóng tin.

Tham khảo: viblo, toidicodedao