So sánh Server Side Rendering (SSR) vs Client Side Rendering (CSR)

Vào những ngày đầu khi mà web mới phát triển, khái niệm Server Side Rendering (SSR) đã được nhiều người nhắc đến. Khi nhận được request, server xử lý nội dung thành HTML rồi return lại cho browser hiển lại lại lên màn hình.

Tuy nhiên, đến ngày nay, công nghệ web đã có những bước nhảy vọt và thay đổi chóng mặt. Dù cho, SSR vẫn là một hình thức được nhiều người sử dụng nhưng rõ ràng nó đã bộc lộ ra những hạn chế và sự nặng nề nhất định trong cách hoạt động.

Điều đó đã dẫn đến một cuộc thảo luận về 2 hình thức render một trang web là SSR và CSR. Sự xuất hiện của các Framework Javascript đã mang tới một cách tiếp cận hoàn toàn mới cho việc phát triển web khi mà chúng ta có thể render các nội dung động chỉ bằng cách gửi yêu cầu lấy các nội dung mình cần.

Điều này cũng góp phần làm giảm tải gánh nặng cho các server khi chỉ cần phục vụ các nội dung được request đến. Đồng thời, thời gian tải trang nhanh hơn và trải nghiệm người dùng cũng tốt hơn.

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu chi tiết về Server Side Rendering (SSR) vs Client Side Rendering (CSR).

Server side rendering là gì?

Server side rendering hay SSR là cách render trang web ở trình duyệt đã được sử dụng từ rất lâu, ở đó, phần lớn logic sẽ được xử lý trên server. 

Khi người dùng truy cập vào trang web, trình duyệt sẽ gửi GET request đến web server. Sau đó, web server đọc dữ liệu từ database và render HTML rồi trả về cho browser để hiển thị lên màn hình.

Đặc điểm của SSR:

• Xử lý logic và render HTML ngay tại server
• Routing chuyển trang nằm ở server

Một số trang web nổi tiếng hiện tại vẫn đang sử dụng SSR có thể kể đến như:24h.com.vn, Kenh14.vn, Zingnews.vn, vtv.vn

Client Side Rendering là gì?

Tương tự với SSR, Client Side Rendering (CSR) cũng là thuật ngữ nói về cách render một trang web. Tuy nhiên, sự khác biệt ở đây là quá trình render sẽ không diễn ra trên web server mà ở trình duyệt.

Đặc điểm của hình thức này là:

• Các logic đơn giản, render HTML, CSS nằm ở client
• Các logic phức tạp  liên quan đến bảo mật, phân quyền vẫn được xử lý trên server
• Chuyển trang ở client side

Facebook, Instagram, Netflix, Twitter, WhatsApp… là các trang web nổi tiếng hiện nay đang sử dụng Client Side Rendering.

So sánh Server side rendering và Client Side Rendering 

Server side rendering

Với SSR, khi nhận được request, server sẽ xử lý HTML rồi trả lại cho browser. Về mặt cơ bản, lúc này nội dung HTML đã hoàn chỉnh và sẽ hiển thị ngay khi được load về màn hình nhưng người dùng vẫn chưa thể tương tác mà chỉ có thể xem được nội dung.

Song song với quá trình này, trình duyệt vẫn tiếp tục tải JS và thực thi ngay khi hoàn tất, lúc đó người dùng mới bắt đầu tương tác được. Dựa vào đây, chúng ta có thể thấy rằng những mặt hạn chế của Server side rendering là:

• Khi chuyển trang thì web sẽ load lại toàn bộ từ đầu gây ảnh hưởng đến trải nghiệm người dùng
• Nếu lượng request lên server nhiều, server dễ xảy ra tình trạng chậm và quá tải
• Tốn băng thông vì server phải gửi lại nhiều dữ liệu trùng và thừa

Tuy nhiên, Server side rendering lại thân thiện với SEO vì khi bot của Google hay Bing vào website sẽ thấy toàn bộ dữ liệu dưới dạng HTML. Đồng thời, SSR tương thích trên rất nhiều trình duyệt khác nhau và thời gian load lần đầu tiên rất nhanh.

Client Side Rendering 

Với sự phát triển vượt bậc của công nghệ, những chiếc máy tính cá nhân ngày nay đang hoạt động vô cùng mạnh mẽ. Việc render thuần HTML hầu như không gây ra bất cứ khó khăn nào. Vậy thì tại sao không để chúng xử lý công việc này mà lại dồn tất cả vào server.

Quan sát hình trên, bạn có thể thấy rằng trình duyệt sẽ load toàn bộ nội dung về máy. Tiếp đến, nó sẽ thực thi code và cho hiển thị nội dung trang web. Lúc này, nhiệm vụ của server sẽ là trả mã nguồn JS và dữ liệu thô cho client còn toàn bộ quá trình sinh ra nội dung sẽ diễn ra trên client.

Điều này đã giúp giải quyết mặt hạn chế của Server side rendering đã được nêu ra phía trên. Tuy nhiên, không có gì là hoàn hảo cả. CRS không thể thay thế hoàn toàn SSR vì bên cạnh ưu điểm, nó cũng tồn đọng một số nhược điểm như:

• Load dữ liệu lần đầu khá chậm vì để render ra HTML, client phải tải 1 cục Javascript về sau đó chạy JS để DOM và gọi API
• Không tốt cho SEO bằng SSR vì nội dung được sinh ra ở trên client nên crawler của các công cụ tìm kiếm không đọc được dữ liệu. Mặc dù hiện nay, Google đã giải quyết được vấn đề này nhưng vẫn có những ảnh hưởng nhất định. Vì vậy, ta cần phải kết hợp thêm SSR

Lời kết

Đến đây thì có lẽ nhiều bạn sẽ đặt ra một câu hỏi: “nên sử dụng Server Side Rendering (SSR) vs Client Side Rendering (CSR)?”

Hiện tại thì mình có thể nói rằng không có câu trả lời nào chính xác cho vấn đề này. Bởi lẻ, việc quyết định sử dụng SSR hay CRS sẽ phụ thuộc vào các yếu tố như dự án đang thực hiện, quốc gia và yêu cầu của dự án.

Nói chung, cả 2 hình thức này đều có những ưu và nhược điểm riêng, không cái nào có thể hoàn toàn thay thế cái nào. 

Sau cùng, xin cảm ơn bạn đọc đã quan tâm và theo dõi bài viết này!