HỎI ĐÁP

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, vì vậy 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 và những công ty khác 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ô hình đơn giản về Server Side Rendering

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) là ở phía máy chủ
  • Logic định tuyến – chuyển hướng trang là ở phía máy chủ
  • Kết xuất logic – 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 (bộ nhớ 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 trên hầu hết các trình duyệt và hoạt động ngay cả khi javascript bị tắt
XEM THÊM:  Lục Vũ: Trà thần của Trung Quốc - Trà Thái Nguyên Chính Gốc

SSR dễ code, hỗ trợ SEO cũng khá 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ó.

Xem thêm: LC là gì? Những điều kiện để mở LC

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.
  • Trang bán hàng, trang tin tức: thegioididong, vnexpress, zing news
  • Trang web và diễn đàn đọc: webtretho, vozforum

Các trang web lớn, web tin tức vẫn sử dụng cơ chế SSR

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 các ứ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)

Những logic về render dữ liệu sẽ được xử lý ở phía client thay cho server

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ủ.
XEM THÊM:  Vi phạm hành chính là gì vi dụ

Ư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.
  • Việc 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, kết xuất 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. Nguyên nhân là do broser phải tải toàn bộ javascript (khá nặng), phân tích cú pháp và chạy js, gọi api để lấy dữ liệu từ server (chậm), rồi 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 trình duyệt cũ 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 thêm 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

Với Client Side Rendering, dự án phải chia ra làm 2 phần là front-end và back-end
XEM THÊM:  Thời gian lao động xã hội cần thiết là gì? Công thức tính và đặc trưng?

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

Tham khảo: 7 Sinh Năm 1984 Mệnh Gì? Hợp Với Tuổi Nào Và Màu Gì mới nhất 2023

Bởi 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)

Website của các ông lớn như Airbnb, Facebook, Netflix, Uber đều sử dụng cơ chế Client Side Rendering cả

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 hiển thị 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 !

Xem thêm: Truyền thông là gì? Định nghĩa và thông tin cần nắm rõ về truyền thông

Vậy là đến đây bài viết về Sự khác biệt giữa server-side rendering và client-side rendering | Từ coder đến developer – Tôi đi code dạo đã dừng lại rồi. Hy vọng bạn luôn theo dõi và đọc những bài viết hay của chúng tôi trên website Onlineaz.vn

Chúc các bạn luôn gặt hái nhiều thành công trong cuộc sống!

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button