Sự khác biệt giữa server-side rendering và client-side rendering | Từ coder đến developer – Tôi đi code dạo

Trong loạt bài về lịch sử lập trình web của mình, tôi đã nói về cách các nhà phát triển web chuyển từ kết xuất phía máy chủ sang phía máy khách.

Trong bài viết này, chúng ta sẽ xem xét sự khác biệt giữa hai cơ chế, lợi ích của chúng, để bạn có thể dễ dàng chọn khi nào sử dụng chúng! Chúng ta cũng sẽ tìm hiểu những cơ chế mà các công ty công nghệ lớn như facebook, airbnb sử dụng!

Bạn đang xem: Client side và server side là gì

Kết xuất phía máy chủ

Cơ chế kết xuất phía máy chủ đã được sử dụng từ thời cổ đại. Nó được gọi là kết xuất phía máy chủ vì hầu hết logic sẽ được xử lý phía máy chủ:

• Khi người dùng truy cập một trang web, trình duyệt sẽ gửi yêu cầu nhận đến máy chủ web
• Máy chủ web sẽ nhận yêu cầu và đọc dữ liệu từ cơ sở dữ liệu.
• Máy chủ web sẽ hiển thị html và đưa nó trở lại trình duyệt để hiển thị cho người dùng

Một số tính chất của cơ chế server side rendering:

• Logic từ đơn giản (xác thực, đọc dữ liệu) đến phức tạp (phân quyền, thanh toán) nằm ở phía máy chủ
• Logic định tuyến – chuyển hướng trang là ở phía máy chủ
• Logic kết xuất – kết xuất trang web cũng nằm trên máy chủ

Ưu và nhược điểm của kết xuất phía máy chủ

Nó đã có từ lâu và kết xuất phía máy chủ đã được sử dụng và cải thiện rất nhiều (cache, cdn). Ưu điểm của cơ chế này:

• Tải ban đầu nhanh chóng và dễ dàng tối ưu hóa vì tất cả dữ liệu đã được xử lý trên máy chủ. Khách hàng chỉ hiển thị.
• Cơ chế này được hỗ trợ bởi các khuôn khổ web từ xưa đến nay
• Dễ hiểu và viết mã hơn. Lập trình viên chỉ cần viết 1 dự án web, không cần tách biệt front-end và back-end
• seo là tốt rồi, vì khi google bot, bing vào web sẽ thấy toàn bộ dữ liệu dạng html .
• Hoạt động với hầu hết các trình duyệt và hoạt động ngay cả khi javascript bị tắt

Thế nhưng, bên cạnh đó, server side rendering cũng có một số nhược điểm:

• Trang web được tải lại nhiều lần mỗi khi người dùng lật trang, điều này gây khó chịu
• Máy chủ nặng vì phải xử lý nhiều logic và dữ liệu. Bộ nhớ đệm có thể được sử dụng để giảm tải.
• Tốn băng thông vì máy chủ phải gửi nhiều dữ liệu thừa và trùng lặp (html, đầu trang, chân trang). Bạn có thể sử dụng cdn để giảm tải.
• Tương tác không tốt bằng hiển thị phía máy khách vì trang cần được làm mới và tải lại nhiều lần.

Kết xuất phía máy chủ vẫn được sử dụng trong nhiều trang web. Vì vậy, chỉ cần bạn hiểu và nắm vững cơ chế này, bạn có thể tạo ra một trang web hoàn chỉnh. chức năng đã có.

Các trang web sử dụng cơ chế này:

• Tất cả các trang web được xây dựng từ cms như joomla, wordpress.
• Các trang bán hàng, trang tin tức: thegioididong, vnexpress, zing news
• Trang đọc và diễn đàn: webtretho, vozforum

Cơ chế client-side rendering

Sau đó, vào những năm 2010, với sự phát triển của javascript và ajax, cơ chế kết xuất phía máy khách bắt đầu được sử dụng.

Các nhà phát triển bắt đầu xây dựng ứng dụng dưới dạng ứng dụng spa – trang đơn . Ứng dụng nằm trong một trang duy nhất, do đó có tên là ứng dụng trang đơn.

Kết xuất phía máy khách có nghĩa là hiển thị html, css sẽ được thực hiện ở phía máy khách (tức là javascript trong trình duyệt)

So với Server Side Rendering (SSR) đã nhắc trong phần 1, Client Side Rendering (CSR) có những đặc điểm sau:

• Logic đơn giản (xác thực, đọc dữ liệu, sắp xếp, lọc) ở phía máy khách
• Định tuyến (chuyển trang) logic, hiển thị (hiển thị) dữ liệu 96,69% ​​ở phía máy khách
• Logic phức tạp (thanh toán, phân quyền) hoặc xử lý nhiều (xử lý dữ liệu, báo cáo) vẫn ở phía máy chủ.

Ưu và nhược điểm của kết xuất phía máy khách

Được đăng sau, vì vậy kết xuất phía máy khách giải quyết một số vấn đề kết xuất phía máy chủ:

• Trang chỉ cần được tải một lần . Khi người dùng lật trang hoặc thêm dữ liệu, javascript sẽ nhận và gửi dữ liệu từ máy chủ thông qua ajax. Người dùng không cần chuyển trang để xem dữ liệu mới.
• Chuyển logic sang máy khách sẽ giảm tải cho máy chủ.
• Giảm băng thông bằng cách chỉ tìm nạp json và dữ liệu bắt buộc thay vì phải tìm nạp toàn bộ trang
• spa chạy trơn tru hơn đối với các ứng dụng yêu cầu nhiều tương tác, Vì mã chạy trong trình duyệt nên không cần tải lại

Tất nhiên, hiển thị phía máy khách cũng có một số nhược điểm:

• Tải ban đầu chậm nếu không xác định được tối ưu hóa. Lý do là người quản lý phải tải xuống toàn bộ javascript (nặng), phân tích cú pháp và chạy js, gọi api để lấy dữ liệu từ máy chủ (chậm), sau đó kết xuất dữ liệu
• yêu cầu dự án được chia thành hai phần riêng biệt là Backend (rest api) và frontend nên việc viết mã khó hơn
• không hoạt động nếu javascript bị tắt hoặc trong các trình duyệt cũ hơn không hoạt động ‘ không chấp nhận javascript es6 (có thể sử dụng bộ chuyển tiếp và polyfill, nhưng sẽ Tăng kích thước tệp js)
• seo không tốt bằng kết xuất phía máy chủ (vì bot thu thập thông tin không thể đọc dữ liệu). Để giải quyết điều này, chúng tôi phải kết hợp ssr (bot mới của Google có thể đọc kết xuất phía máy khách).
• Nếu khách hàng sử dụng thiết bị di động, thiết bị yếu, quá trình tải sẽ rất chậm

Các website sử dụng Client-Side Rendering

Vì kết xuất phía máy khách rất phù hợp cho các ứng dụng đòi hỏi nhiều tương tác nên hầu hết các công ty công nghệ, mạng lưới của các công ty khởi nghiệp đều sử dụng cơ chế này:

• facebook (phản ứng)
• instagram (phản ứng)
• netflix (phản ứng)
• tài khoản đăng (phản ứng)
• airbnb (phản ứng)
• trello (góc cạnh)
• paypal (góc cạnh + phản ứng)
• xiaomi (vuejs)
• alibabe (vuejs)
• gitlab (vuejs)

Nói chung, client side rendering còn khá mới mẻ nên vẫn còn một số vấn đề nhỏ chưa được giải quyết tốt (tối ưu tốc độ initial load, giảm kích cỡ file JavaScript của app).

Các kỹ sư hàng đầu tại facebook, netflix, instagram vẫn đang giải quyết những vấn đề này …

Kết thúc

Trong bài viết này, tôi đã giới thiệu ngắn gọn cả cơ chế kết xuất phía máy khách và phía máy chủ. Tôi cũng đã chia sẻ những ưu và nhược điểm của cả hai cơ chế.

Một điều tôi không đề cập trong bài viết là đôi khi các trang web kết hợp kết xuất phía máy chủ và kết xuất phía máy khách . Ví dụ: máy chủ sẽ tải trước một số dữ liệu cho máy khách dưới dạng json hoặc máy chủ sẽ hiển thị html khi gặp bot để hỗ trợ cạo tốt hơn.

Bản thân thư viện kết xuất phía máy khách giống như phản ứng và vuejs cũng hỗ trợ kết xuất phía máy chủ (phản ứng có react-dom / server, vuejs có nuxt). Các bạn quan tâm có thể tự tìm hiểu nhé!

p / s: Để đi dạo theo bài đăng của tôi ở trên, hãy nhớ đăng ký chatbot của chúng tôi. Vào thứ Tư hàng tuần, các chương trình của chúng tôi sẽ gửi cho bạn những bài viết tuyệt vời về kỹ năng cứng và mềm, kinh nghiệm trong ngành !