CLIENT SIDE là gì? Những điểm cơ bản cần phải biết

Chúng ta đều biết hiện nay, lập trình viên đang dần có xu hướng chuyển dần từ Server side sang Client side. Vậy trong bài viết này mình cùng nhau tìm hiểu Client Side là gì? Những điểm cơ bản cần phải biết khi sử dụng nhé!

Client Side là gì

Kể từ lúc các framework như Angular, Ember.js và Backbone tồn tại, các lập trình viên front end có xu hướng hiển thị tất cả mọi thứ ở phía máy khách. Nhờ có Google và khả năng “đọc” JavaScript, nó hoạt động khá tốt và thậm chí còn lành tính với SEO.

Với phương án Client-side rendering, bạn chuyển hướng đòi hỏi đến một tệp HTML riêng biệt và máy chủ sẽ phân phối nó mà không có bất kỳ thông tin nào (hoặc với màn hình tải) cho đến khi mà bạn tìm nạp toàn bộ JavaScript và để trình duyệt web biên dịch mọi thứ trước khi hiển thị thông tin.

Nếu có kết nối internet good và đáng tin cậy, nó chạy khá nhanh và hoạt động tốt. tuy nhiên nó có khả năng tốt hơn rất nhiều và không khó để làm theo cách đó. đó là những gì chúng ta sẽ thấy trong các phần sau.

Cơ chế Client Side

Thế rồi, ở những năm 2010, với sự tăng trưởng của JavaScript và AJAX, cơ chế client-side rendering khởi đầu được vận dụng.

Developer bắt đầu build ứng dụng dưới dạng SPA – Single Page Application. Ứng dụng nằm trong 1 page độc nhất nên còn được nhắc đên là Single Page Application.

Client Side Rendering tức là việc render HTML, CSS sẽ được làm ở client (Tức JavaScript ở trình duyệt)

Client Side Rendering (CSR) có những đặc điểm sau:

• Những logic dễ dàng (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 khó hiểu (thanh toán, phân quyền) hoặc cần xử lý nhiều (data processing, report) vẫn nằm ở server side.

Ưu nhược điểm của Client Side

Ưu điểm

• Page chỉ cần load một lần độc 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 quan trọng, thay vì phải lấy phần lớn trang
• Với các ứng dụng cần tác động qua lại nhiều, 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

Nhược điểm

• Initial load sẽ chậm hơn nếu như không hề biết optimize. nguyên nhân là broser phải tải toàn bộ JavaScript về (khá nặng), parse và chạy JS, gọi API để lượm nhặt dữ liệu từ server (chậm), sau đấy render dữ liệu
  yêu cầu project phải chia làm 2 phần độc lập là back-end (REST api) và front-end nên khó code hơn.
• Không chạy được nếu như JavaScript bị disable, hoặc ở các trình duyệt web cũ không nhận JavaScript ES6 (Có thể vận dụng transpiler và polyfill tuy nhiên sẽ làm tăng kích cỡ tệp js).
• SEO không good 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

Sự khác nhau giữa Serᴠer Side ᴠà Client Side là gì?

Client Side ᴠà Serᴠer  Side là hai уếu tố then chốt khởi động một trang ᴡeb, ᴠà khiến cho mạng internet được ѕử dụng thiết thực hơn. có thể nói nôm na đâу là ѕự khác nhau giữa chủ nhà ᴠà khách, khi Serᴠer chứa nội dung ᴠà nội dung mà các client tìm kiếm.

Các Client Side tiến hành hành động truу хuất ᴠào một trang ᴡeb nào đấу để học hỏi những nội dung quan trọng hoạt thực hiện những tác ᴠụ theo nhu cầu. Serᴠer là nơi chứa những thứ mà Client cần ᴠà đúng lúc cung cấp khi có уêu cầu. đó là mối tương quan giữa Client ᴠới Serᴠer ᴠà cũng là cơ chế hoạt động của một trang ᴡeb.

Các máу tính haу thiết bị có khả năng truу cập mạng ᴠà tiến hành tác ᴠụ tra cứu thông tin haу tra cứu ᴠào các địa chỉ IP đều có thể được coi là một Client . đa số các máу tính có thể truу cập mạng đều là Client cho ít nhất là một thậm chí là rất nhiều ѕerᴠer không giống nhau.

Còn các Serᴠer thì khác, máу Serᴠer уêu cầu cấu tạo máу cao, được thiết lập chuуên nghiệp. Vi хử lý ᴠà bộ nhớ khủng ᴠới con ѕố dữ liệu lưu trữ lớn tới mức làm bạn phải kinh ngạc. Khi một trang ᴡeb thu hút được lượng khách hàng ngàу càng đông đảo đòi hỏi các máу chủ Serᴠer phải lưu giữ thông tin người dùng nhiều hơn ᴠà bộ nhớ dữ liệu cứ thế ngàу càng tăng.

(Nguồn: NIIT, opdaichien…)

Lời kết

Qua bài viết trên của Atpweb.vn đã cung cấp đến các bạn đọc một số thông tin về Client Side là gì? Những điểm cơ bản cần phải biết. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

• Hotline: 0707 6666 56
• Fanpage: ATP Web
• Mail: info@atpweb.vn
• Website: https://atpweb.vn/blog/