Sự Khác Nhau Giữa Client Side Là Gì ? Server Side Rendering Vs Client Side Rendering

Chúng ta đều biết rằng hiện nay, các nhà phát triển đang dần chuyển từ Server-side Rendering sang Client-side Rendering. Vì vậy, trong bài viết này, hãy cùng tìm hiểu về sự khác biệt giữa hai cơ chế này, ưu nhược điểm của chúng để bạn dễ dàng lựa chọn khi sử dụng nhé!

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

Kết xuất phía máy chủ là một cơ chế đã có từ lâu. Gọi nó là kết xuất phía máy chủ vì hầu hết logic sẽ được xử lý tại máy chủ:

Khi người dùng vào một trang web, trình duyệt sẽ gửi yêu cầu GET đến máy chủ web. Máy chủ web sẽ nhận yêu cầu, đọc dữ liệu từ cơ sở dữ liệu. Máy chủ web sẽ kết xuất HTML, trả lại cho trình duyệt để hiển thị cho người dùng.

Một số thuộc tính của cơ chế kết xuất phía máy chủ:

Logic từ đơn giản (xác nhận, đọc dữ liệu) đến phức tạp (phân quyền, thanh toán) đều nằm ở serverLogic để định tuyến – chuyển trang nằm ở serverLogic để kết xuất – hiển thị trang web cũng nằm ở server node.

Ưu điểm của kết xuất phía máy chủ

Load ban đầu nhanh, dễ otpimize vì toàn bộ dữ liệu đã được xử lý tại server. Khách hàng chỉ hiển thị. Các web framework từ xưa đến nay đều hỗ trợ cơ chế này. Dễ hiểu và viết mã hơn. Developer chỉ cần code 1 project web, không cần tách biệt front-end và back-end Chạy trên hầu hết các trình duyệt, tắt JavaScript vẫn chạy tốt

Xem thêm bài viết hay:  Thu hồi đất là gì? Ai có thẩm quyền thu hồi đất?

Khuyết điểm:

Mỗi khi người dùng lật trang, trang web phải tải lại nhiều lần, gây khó chịu. Nặng gánh cho máy chủ vì máy chủ phải xử lý rất nhiều logic và dữ liệu. Bộ nhớ đệm có thể được sử dụng để giảm tải. Tiêu tốn băng thông do máy chủ phải gửi nhiều dữ liệu dư thừa, trùng lặp (HTML, header, footer). Có thể dùng CDN để giảm tải. Tương tác không tốt bằng Client Side rendering do trang phải refresh, tải lại nhiều lần.2.

Đang xem: Client side là gì

Xem thêm: Stt Hay Về Yêu Xa – Status Cảm Động Dành Cho Các Cặp Đôi Yêu Xa

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

Bắt đầu từ 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. Nhà phát triển bắt đầu xây dựng ứng dụng dưới dạng SPA – Ứng dụng Trang Đơn. Ứng dụng này nằm trong một trang duy nhất nên nó được gọi là Ứng dụng một trang.

Client Side Rendering có nghĩa là kết xuất HTML và CSS sẽ được thực hiện tại máy khách (tức là JavaScript trên trình duyệt).

*

Các logic đơn giản (xác thực, đọc dữ liệu, sắp xếp, lọc) được đặt ở phía máy khách. Vẫn do máy chủ quản lý. Logic phức tạp (thanh toán, phân quyền) hay xử lý nhiều (xử lý dữ liệu, báo cáo) vẫn nằm ở phía máy chủ.

Xem thêm: Lễ Vu Lan Phật Lịch 2020 – Nhân Lễ Vu Lan 2020

Xem thêm bài viết hay:  An toàn lao động là gì? Mục đích của an toàn lao động?

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

Trang chỉ cần tải một lần. Khi người dùng lật trang hoặc thêm dữ liệu, JavaScript sẽ tìm nạp và gửi dữ liệu từ máy chủ qua AJAX. Người dùng có thể xem dữ liệu mới mà không cần lật trang. Di chuyển logic đến máy khách sẽ giảm một số tải cho máy chủ. Giảm băng thông do chỉ lấy JSON và dữ liệu cần thiết, thay vì phải lấy cả trangVới các ứng dụng Ứng dụng cần tương tác nhiều thì SPA chạy mượt hơn vì code chạy trên trình duyệt, không cần load đi load lại rất nhiều

Khuyết điểm

Tải ban đầu sẽ chậm hơn nếu không biết tối ưu hóa. Lý do là broser phải tải toàn bộ JavaScript (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 Yêu cầu chia project thành 2 phần riêng biệt , back-end ( REST api) và front-end sẽ khó viết mã 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 chấp nhận JavaScript ES6 (Có thể sử dụng Transpiler và polyfill nhưng sẽ làm tăng tệp js kích thước)Nếu máy khách dùng di động, Nếu máy yếu thì load chậm3. Các trang web sử dụng Kết xuất phía máy khách

Vì Client-side rendering rất phù hợp với các ứng dụng cần tương tác nhiều nên hầu hết web của các hãng công nghệ, startup đều sử dụng cơ chế này:

Xem thêm bài viết hay:  "Keep In The Dark Là Gì ? Dark Nghĩa Là Gì Trong Tiếng Anh

Facebook (React)Instagram (React)Paypal (React + Angular)v…v…4. Sự kết luận

Trong bài viết này, tôi đã giới thiệu sơ lược về hai cơ chế kết xuất phía máy khách và kết xuất phía máy chủ. Mình cũng chia sẻ về ưu nhược điểm của 2 cơ chế này.

Bản thân các thư viện client-side rendering như React, VueJS cũng hỗ trợ server rendering (React có Reac-dom/server, VueJS có Nuxt). Bạn nào quan tâm có thể tự tìm hiểu thêm nhé!

Bạn thấy bài viết Sự Khác Nhau Giữa Client Side Là Gì ? Server Side Rendering Vs Client Side Rendering có khắc phục đươc vấn đề bạn tìm hiểu ko?, nếu ko hãy comment góp ý thêm về Sự Khác Nhau Giữa Client Side Là Gì ? Server Side Rendering Vs Client Side Rendering bên dưới để Trường Cao đẳng Nghề Khách sạn Du lịch Quốc tế IMPERIAL có thể thay đổi & cải thiện nội dung tốt hơn cho các bạn nhé! Cám ơn bạn đã ghé thăm Website: imperialhotelschool.edu.vn của Trường Cao đẳng Nghề Khách sạn Du lịch Quốc tế IMPERIAL

Nhớ để nguồn: Sự Khác Nhau Giữa Client Side Là Gì ? Server Side Rendering Vs Client Side Rendering của website imperialhotelschool.edu.vn

Chuyên mục: Là gì?

Viết một bình luận