Client-Side & Server-Side
Introduce and compare each other
Last updated
Introduce and compare each other
Last updated
Với sự ra đời của các framework Javascript, đem tới một cách tiếp cận hoàn toàn mới với việc phát triền web. Các framework Javascript mang tới khả năng giảm bớt gánh nặng cho server.
Nhờ sức mạnh của Javascript framework, chúng ta có thể hiển thị nội dung động trên trình duyệt chỉ bằng cách gửi yêu cầu lấy nội dung cần thiết. Server chỉ cần đáp ứng nội dung của yêu cầu. Điều này giúp trải nghiệm người dùng mượt mà hơn vì không cần tải lại các trang web.
Server side rendering hay SSR là cách thông thường cho việc render trang web ở trình duyệt. Như các bước mô tả bên dưới cách truyền thống để rendering nội dung web như các bước dưới đây :
Người dùng gửi một yêu cầu tới website( Thông thường thông qua trình duyệt)
Phía server kiểm tra và chuẩn bị nội dung HTML sau khi đã đi qua một lượt các script có trong trang web
Các đoạn HTML đã được biên dịch được gửi tới trình duyệt của người dùng cho việc render.
Trình duyệt tải về HTML và làm các trang có thể nhìn thấy với người dùng
Trình duyệt sau đó tải về Javasciprt(JS) và tiến hành thực thi JS, nó làm cho trang web có thể tương tác
Trong quá trình này, tất các gánh nặng của việc lấy nội dung động, chuyển chúng thành HTML, gửi chúng tới trình duyệt đều ở phía server. Do đó, quá trình này được gọi là Server side rendering(SSR).
Việc chịu trách nhiệm cho việc render HTML hoàn thiện dẫn tới server tốn bộ nhớ và tài nguyên để xử lí. Do đó, server side rendering làm tăng thời gian tải trang khi so sánh với các trang tĩnh (các trang web không render các nội dung động )
Client side rendering là một cách tiếp cận khác về việc làm thế nào một trang web được xử lí để hiển thị trên trình duyệt. Ở CSR, gánh nặng về việc biên dịch nội dung, sinh ra HTML được chuyển tới phía trình duyệt người dùng.
Cách tiếp cận này được tiếp sức mạnh từ các framework Javascript và các thư viện. Luồng chính của một trang web render trong trường hợp Client-side rendering như sau:
Người dùng gửi yêu cầu đến một trang web (thông thường thông qua trình duyệt).
Thay vì máy chủ, một CDN (Mạng phân phối nội dung) có thể được sử dụng để cung cấp HTML, CSS và các tệp hỗ trợ tĩnh cho người dùng.
Trình duyệt tải xuống HTML và sau đó là JS. Trong khi đó, người dùng thấy biểu tượng đang tải.
Sau khi trình duyệt nhận được JS, nó thực hiện các yêu cầu API thông qua AJAX để lấy dynamic content và xử lý nó để hiển thị nội dung cuối cùng.
Sau khi máy chủ phản hồi, nội dung cuối cùng được hiển thị bằng cách xử lý DOM trên trình duyệt của end user.
So với Server Side Rendering (SSR) đã nhắc trong phần 1, Client Side Rendering (CSR) có những đặc điểm sau:
Những logic đơn giản (validation, đọc dữ liệu, sorting, filtering) nằm ở client side
Logic để routing (chuyển trang), render (hiển thị) dữ liệu thì 96.69% là nằm ở client side
Logic phức tạp (thanh toán, phân quyền) hoặc cần xử lý nhiều (data processing, report) vẫn nằm ở server side.
Ra mắt sau nên Client Side Rendering giải quyết được một số vấn đề của server side rendering:
Page chỉ cần load một lần duy nhất. Khi user chuyển trang hoặc thêm dữ liệu, JavaScript sẽ lấy và gửi dữ liệu từ server qua AJAX. User có thể thấy dữ liệu mới mà không cần chuyển trang.
Chuyển logic sang client nên giảm tải được một phần cho server.
Giảm được băng thông do chỉ cần lấy JSON và dữ liệu cần thiết, thay vì phải lấy toàn bộ trang
Với các ứng dụng cần tương tác nhiều, Single Page Application (SPA) hoạt động mượt mà hơn vì code chạy trên browser, không cần load đi loại lại nhiều
Tất nhiên là client side rendering cũng có một số nhược điểm riêng:
Initial load sẽ chậm hơn nếu không biết optimize. Lý do là broser phải tải toàn bộ JavaScript về (khá nặng), parse và chạy JS, gọi API để lấy dữ liệu từ server (chậm), sau đó render dữ liệu
Đòi hỏi project phải chia làm 2 phần riêng là back-end (REST api) và front-end nên khó code hơn
Không chạy được nếu JavaScript bị disable, hoặc ở các trình duyệt cũ không nhận JavaScript ES6 (Có thể dùng transpiler và polyfill nhưng sẽ làm tăng kích cỡ file js)
SEO không tốt bằng Server Side Rendering (Do bot crawl không đọc được dữ liệu). Để giải quyết, ta phải kết hợp thêm SSR (Bot mới của Google đọc được client-side rendering rồi).
Nếu client sử dụng mobile, device yếu thì khi load sẽ bị chậm
