Sự khác biệt cơ chế client-side rendering, server-side rendering và pre rendering

Trong cộng đồng FE đã có sự thay đổi lớn về render của ứng dụng. Render ở client side đang ngày càng thu hút hơn nhờ có các công nghệ mới như ReactJs, Angular, VueJS, ... Các công nghệ mới của client side đem đến trải nghiệm người dùng một cách tốt hơn nhờ thời gian hiển thị tới người dùng tốt cũng như giảm tải cho phía server. Nhưng nó không phải là một giải pháp duy nhất để cung cấp trải nghiệm thời gian hiển thị tốt đối với người dùng. Server side pre rendering cũng là một giải pháp tốt. Sự khác biệt của 2 giải pháp này là gì hãy cùng mình giải đáp qua bài viết này nhé.

Kể từ khi các công nghệ mới ở client được ra đời, các nhà phát triển FE có xu hướng hiển thị mọi thứ ở phía client. Nhờ Google và khả năng "đọc" JS, nó cũng hoạt động khá tốt và thậm chí còn thân thiện với SEO.

Với giải pháp client side, bạn chuyển hướng yêu cầu đến tệp HTML duy nhất và máy chủ sẽ phân phối nó mà không có bất kỳ nội dung (hoặc với màn hình loading) cho đến khi bạn tìm nạp tất cả JS và trình duyệt biên dịch mọi thứ trước khi hiển thị nội dung.

Nhưng nó gặp một vấn đề, số lượng tải file JS khá nhiều và nặng, dễ dẫn tới lỗi file nếu như đường truyền mạng không được tốt. Nếu như đường truyền internet phía người dùng tốt thì nó hoạt động khá mượt. Nhưng có một cách khác tốt hơn rất nhiều sẽ khắc phục được các nhược điểm này.

Giải pháp SSR là giải pháp quen thuộc mà nhiều ứng dụng đã từng làm trước đây, hiện nay cũng còn nhiều ứng dụng sử dụng giải pháp này.

Với các ứng dụng sử dụng SSR, server sẽ biên dịch mọi thứ bao gồm dữ liệu và phân phối một trang HTML đầy đủ được trả về client. Phía client được hiển thị nhanh chóng. Nhưng mỗi khi bạn tới một route khác thì server phải thực hiện lại mọi thứ từ lấy file, biên dịch và trả về html với cả css và js dẫn đến timeout tải trang từ vài trăm mili giây đến cả giây.

Điều gì sẽ xảy ra nếu bạn thực hiển tải trang đầu tiên với giải pháp SSR và sau đó sử dụng một biện pháp thực hiện route động với ajax và chỉ tìm nạp dữ liệu cần thiết ?

Ưu điểm của giải pháp này là có thể phát triển ở phía server và client với cùng một code và mang tới trải nghiệm nhanh chóng cho người dùng với nhưng dữ liệu thay đổi. Nhược điểm là server cần phải chạy lại. SSR được sử dụng để khắc phục vấn đề của client side khi mà kết nối của người dùng không thật sự tốt, vì nó có thể nạp trước dữ liệu giảm lượng request giữa client và server.

Với các dữ liệu cần điền sẵn cho file HTML như các thẻ meta thì client side không thể làm được thì SSR là một giải pháp tốt. Các bot thu thập dữ liệu hay preview route từ website khác cũng được thực hiện một cách tốt hơn nhờ sử dụng SSR.

Giải pháp client side và server side render đều có ưu và nhược điểm, nếu 2 lấy loại này hợp lại thành một thì có một giải pháp tuyệt vời. Với một yêu cầu từ client, server có thể render trước 1 phần html như các thẻ meta, dữ liệu cơ bản, ... và các dữ liệu khác sẽ được render ở phía client. Như vậy, có thể khắc phục các vấn đề của 2 giải pháp trên. Hiện nay, cũng có rất nhiều giải pháp tích hợp như vậy và phát triển rất mạnh như: NextJS, NuxtJS, ... Nó đem đến trải nghiệm tốt nhất với người dùng.