SSR (Server side rendering) là kỹ thuật không còn xa lạ gì với các bạn lập trình viên nữa. Nó có từ thủa sơ khai của website, nhưng thời gian gần đây nó lại được nhắc đến nhiều hơn bởi nó đã được giải quyết khá nhiều yếu điểm, vậy hãy cùng tìm hiểu qua bài viết này nhé.
Contents
SSR (Server side rendering) hoạt động thế nào?
Chúng ta cùng xem quy trình hoạt động của SSR thông qua ảnh bên dưới nhé:
Qua bức ảnh trên chúng ta cũng đã hiểu được phần nào quy trình hoạt động của nó.
- Đầu tiên: Browser sẽ gửi một request lên web server
- Tiếp theo: Web server sẽ trả về toàn bộ code bao gồm html js css đã được render sẵn
- Sau đó: Browser sẽ render giao diện lên cho người dùng, đồng thời load javascript về để xử lý
- Sau cùng khi js đã load và browser xử lý xong, lúc này thì user mới có thể tương tác được với trang web của bạn
Trên đây là quy trình chung của SSR, cũng như những framework hỗ trợ việc SSR như Nextjs, Nuxtjs, …
Điểm lợi của kỹ thuật này là gì?
Có thể nói điểm lợi nhất của phương pháp này đó là tối ưu SEO, website của bạn do được render trên server nên khi những công cụ tìm kiếm như Google, Big, … craw qua thì sẽ đọc được hết nội dung website.
Mặc dù thời gian gần đây Google đã phát triển kỹ thuật có thể craw được những website CSR nhưng chắc chắn nó vẫn chưa được tối ưu.
Tiếp theo là website của bạn sẽ được hiển thị nhanh hơn tới người dùng, mặc dù người dùng chưa thế tương tác được, nhưng vẫn tốt hơn là một trang web trắng không có gì cả.
Vậy đâu là điểm chưa tốt của nó?
Điểm tốt thì cũng đã nói rồi, giờ thì đến điểm mà nó chưa làm tốt
Có thể kể đến như, do render trên server nên thời gian phản hồi TTFB(Time To First Byte) sẽ chậm hơn là CSR.
Web server của bạn sẽ tốn băng thông hơn vì truyền tải lượng thông tin lớn hơn.
Mọi thay đổi của bạn đều phải load lại trang, do xử lý trên server mà.
NHƯNG với NextJS thì bạn hoàn toàn có thể xử lý nó như một ứng dụng CSR mà vẫn là SSR. Tức là ban đầu ứng dụng của bạn vẫn tải toàn bộ html css đã xử lý trên server về, và sau đó mọi tác vụ sẽ tiếp tục xử lý tại client mà không cần phải load lại trang ( cái này giống điểm tốt hơn thì phải :)) )
CSR (Client side rendering) nó có gì hay?
Tiếp đến anh CSR này.
Cũng chính vì thời kỳ đầu của công nghệ với phiên bản SSR nên chúng ta đã phát triển kỹ thuật CSR, với kỹ thuật này, thay vì code của bạn được xử lý ở server thì toàn bộ sẽ được đẩy xuống cho client xử lý.
Một phần vì những ứng dụng hiện đại ngày càng lớn, những tác vụ nặng nề cần xử lý một lượng dữ liệu lớn hơn, và một phần là vì những thiết bị điện tử ngày nay như điện thoại, laptop ngày càng mạnh mẽ nên đã đủ đáp ứng được hiệu năng để xử lý.
Cũng phải nói đến sự phát triển của Reactjs, hay Vuejs làm cho kỹ thuật này ngày càng được nhiều người ưa chuộng.
Bạn có thể thấy rằng với CSR khi browser request lên web server thì sẽ nhận về một trang html rỗng cùng với một tập tin javascript
Sau đó trình duyệt sẽ bắt đầu chạy tập tin Reactjs, và xong xuôi hết thì mới hiển thị giao diện ra cho người dùng.
CSR có gì chưa làm tốt?
Điểm chưa tốt đầu tiên đó là lượng data load về lần đầu khá nặng, là toàn bộ code của ứng dụng
Tiếp theo là thời gian hiển thị lần đầu sẽ chập hơn so với SSR, còn những lần sau thì sẽ nhanh hơn. Nhưng điều đó chỉ đúng với SSR truyền thống, còn với Nextjs thì không (đã trình bày ở trên)
Điểm mấu chốt tiếp theo là về SEO, bạn sẽ rất khó để tối ưu SEO một ứng dụng CSR, mặc dù vẫn có vài cách để khắc phục nhưng dù sao thì tự bản thân nó chưa làm tốt điều này.
Vậy rốt cuộc nên dùng SSR hay CSR?
Câu trả lời của mình là dùng cả hai.
Tuỳ vào yêu cầu của từng dự án mà lựa chọn công nghệ cho phù hợp là phải pháp tối ưu nhất, CSR và SSR cũng chỉ là một trong vô vàn kỹ thuật phát triển khác nhau mà thôi.
Hãy lựa chọn đúng công nghệ cho dự án của bạn, đó mới là điều tốt nhất, hãy thử và trải nghiệm và rút ra kết luận cho bản thân.
Điểm mấu chốt của 2 kỹ thuật này là 1 cái render ở client, một cái render ở server.
Tạm kết
Như vậy mình đã trình bày xong về 2 kỹ thuật SSR và CSR cũng như điểm lợi, hại của nó.
Công nghệ không ngừng phát triển, nếu bạn ngừng học hỏi thì chắc chắn bạn sẽ lạc hậu, sớm thôi …
Nếu thấy hữu ích đừng quên chia sẻ để ủng hộ mình nhé.