Client-side rendering vs Server-side rendering – Đâu là sự lựa chọn của bạn
Ngày trước, cách thông thường để đưa HTML của bạn lên màn hình là sử dụng server-side rendering. Nó là con đường duy nhất. Bạn tải lên HTML, sau đó máy chủ của bạn sẽ chuyển chúng thành các tài liệu hữu ích trên trình duyệt của người dùng. Server-side rendering hoạt động rất tốt vào ...
Ngày trước, cách thông thường để đưa HTML của bạn lên màn hình là sử dụng server-side rendering. Nó là con đường duy nhất. Bạn tải lên HTML, sau đó máy chủ của bạn sẽ chuyển chúng thành các tài liệu hữu ích trên trình duyệt của người dùng.
Server-side rendering hoạt động rất tốt vào thời điểm đó. Vì hầu hết các trang web chỉ để hiển thị ảnh và các đoạn văn bản tĩnh, với rất ít cách thức tương tác.
Nhưng cho tới ngày nay, nó đã không còn phù hợp nữa. Bạn có thể thấy rằng các trang web hiện tại gần giống như các ứng dụng. Bạn có thể gửi tin nhắn, update thông tin, mua sắm và nhiều thứ khác… Nói cách khác, trang web giờ đã có những tiến bộ hơn so với trước kia rất nhiều.
Cũng vì thế mà phương thức render ở server lại dần nhường chỗ cho phương thức render ở phía client.
Vậy đâu là sự lựa chọn tốt cho bạn giữa Client-side rendering vs Server-side rendering? Nó phụ thuộc vào kế hoạch thực hiện cho trang web của bạn. Bạn cần hiểu được những ưu nhược điểm của từng phương thức, sau đó tự quyết định đâu là sự lựa chọn tốt của bạn.
Server-side rendering
Server-side rendering là phương pháp phổ biến nhất để hiện thông tin trên màn hình. Nó hoạt động bằng cách chuyển đổi các tệp HTML trong máy chủ thành thông tin có thể sử dụng cho trình duyệt.
Bất cứ khi nào bạn truy cập một trang web, trình duyệt của bạn sẽ yêu cầu máy chủ trả về nội dụng trên trang web của bạn. Yêu cầu thường chỉ mất vài mili giây, nhưng điều đó cũng phụ thuộc vào vô số yếu tố như:
- Tốc độ internet của bạn.
- Vị trí của máy chủ.
- Số người đang truy cập vào trang web của bạn.
- Trang web của bạn được tối ưu như thế nào…
Khi yêu cầu được xử lý xong, trình duyệt của bạn lấy lại HTML được hiển thị đầy đủ và hiển thị nó ra màn hình. Nếu sau đó bạn quyết định truy cập một trang web khác, trình duyệt của bạn sẽ lại gửi một request khác về thông tin mới.
Điều này sẽ xảy ra mỗi lần truy cập một trang mà trình duyệt không lưu trong bộ nhớ cache. Sẽ không vấn đề gì nếu trang mới chỉ có một vài mục khác với trang hiện tại, trình duyệt sẽ yêu cầu toàn bộ trang mới và sẽ hiện thị lại mọi thứ từ đầu.
Ví dụ bạn truy cập trang web có địa chỉ là example.testsite.com với cấu trúc DOM như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example Website</title> </head> <body> <h1>My Website</h1> <p>This is an example of my new website</p> <a href="http://example.testsite.com/other.html.">Link</a> </body> </html> |
Nếu bạn nhập địa chỉ trang web ở trên vào trình duyệt của bạn, nó sẽ đưa ra yêu cầu đến máy chủ đang được sử dụng bởi URL đó và chờ phản hồi của một số văn bản sẽ hiển thị trên trình duyệt.
Trong trường hợp này, những gì bạn thấy sẽ là tiêu đề, nội dung đoạn văn và các liên kết.
Bây giờ, giả sử rằng bạn muốn nhấp vào liên kết từ trang được hiển thị có chứa code sau đây:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example Website</title> </head> <body> <h1>My Website</h1> <p>This is an example of my new website</p> <p>This is some more content from the other.html</p> </body> </html> |
Sự khác biệt duy nhất giữa trang trước và trang này là trang này không có liên kết và thay vào đó có một đoạn khác.
Logic ở đây là sẽ request thêm phần nội dung mới và phần còn lại giữ nguyên
Thật tiếc là đây không phải cách thức hoạt động của Server-side rendering.
Điều thực sự xảy ra là toàn bộ trang mới sẽ được hiển thị chứ không chỉ nội dung mới.
Qua 2 ví dụ này có lẽ cũng không phải là vấn đề to tát. Nhưng hầu hết các trang web không đơn giản như vậy. Các trang web hiện đại có hàng trăm dòng code và phức tạp hơn nhiều.
Hãy tưởng tượng việc duyệt một trang web và phải chờ từng trang để hiển thị khi điều hướng trang web. Nếu bạn truy cập một trang xây dựng bằng WordPress, bạn có thể thấy chúng chậm như nào.
Về mặt tích cực, server-side rendering tốt cho SEO. Nội dung của bạn có mặt trước khi bạn nhận được nó, vì vậy các công cụ tìm kiểm có thể lập chỉ mục và thu thập thông tin tốt. Với client-side rendering thì không hề đơn giản như vậy.
Client-side rendering
Khi các lập trình viên nói về client-side rendering, họ nói về việc hiển thị nội dung trong trình duyệt bằng JavaScript. Vì vậy thay vì phải lấy tất cả nội dung từ chính tài liệu HTML, bạn cần một tài liệu HTML đơn giản với JavaScript sẽ hiển thị phần còn lại của trang web bằng trình duyệt.
Đây là cách tiếp cận tương đối mới để render websites, và nó không thực sự phổ biến cho đến khi các thư viện của JavaScript bắt đầu kết hợp nó vào phong cách phát triển của họ.
Quay lại trang web ở trên, giả sử bạn có file index.html với code như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example Website</title> </head> <body> <div id="root"> <app></app> </div> <script src="https://vuejs.org"type="text/javascript"></script> <script src="location/of/app.js"type="text/javascript"></script> </body> </html> |
Bạn có thể thấy ngay rằng có một số thay đổi lớn đối với cách chỉ mục hmtl hoạt động khi sử dụng client-side rendering.
Đối với ngời mới bắt đầu, thay vì có nội dung bên trong HTML, bạn có một div container với id là root. Bạn cũng required 2 đoạn script là một thư viện JavaScript VueJS và một tệp có tên app.js.
Điều này hoàn toàn khác so với sử dụng server-side rendering vì máy chủ hiển chỉ chịu trách nhiệm tải khung của trang web. Mọi thứ khác được xử lý bởi thư viện JavaScript phía client (trong ví dụ này là Vue.js).
Nếu bạn chỉ yêu cầu URL chỉ với đoạn code trên. Bạn sẽ nhận được một trang trắng, không có gì để tải vì nội dung thực tế cần được hiển thị bằng JavaScript.
Để fix điều đó, bạn sẽ đặt dòng code sau vào file app.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var data = { title:"My Website", message:"This is an example of my new website" } Vue.component('app', { template: ` <div> <h1>{{title}}</h1> <p id="moreContent">{{message}}</p> <a v-on:click='newContent'>Link</a> </div> `, data: function() { return data; }, methods:{ newContent: function(){ var node = document.createElement('p'); var textNode = document.createTextNode('This is some more content from the other.html'); node.appendChild(textNode); document.getElementById('moreContent').appendChild(node); } } }) new Vue({ el: '#root', }); |
Bây giờ nếu bạn truy cập URL, bạn sẽ thấy nội dung giống như bạn đã làm ví dụ với server-side.
Sự khác biệt chính là nếu bạn nhấp vào liên kết trang để tải thêm nội dung, trình duyệt sẽ không đưa ra yêu cầu khác đối với máy chủ
Bạn đang rendering items bằng trình duyệt. Do đó, nó sẽ sử dụng JavaScript để tải nội dung mới và Vue.js sẽ đảm bảo rằng chỉ nội dung mới được hiển thị. Mọi thứ khác được giữ nguyên.
Việc này nhanh hơn nhiều vì bạn chỉ tải một phần rất nhỏ của trang để tìm nạp nội dung mới, thay vì tải toàn bộ trang.
Tuy nhiên, có một số sự đánh đổi bằng cách sử dụng client-side rendering. Vì nội dung không được hiển thị cho đến khi trang được tải trên trình duyệt. Vì vậy SEO cho trang web sẽ khó khăn hơn nhiều. Có nhiều cách để khắc phục điều này, nhưng nó không dễ như với server-side rendering.
Client-side rendering vs Server-side rendering
Ở trên ta đã giải thích được cách mà 2 phương pháp hoạt động. giờ là sự lựa chọn của bạn, xem đâu là giải pháp cho trang web của bạn. Dưới đây là một số phân tích nhanh những ưu và nhược điểm cho từng phương pháp:
Ưu điểm Server-side
- Công cụ tìm kiếm có thể thu thập dữ liệu trang web để SEO tốt hơn.
- Tải trang ban đầu nhanh hơn.
- Phù hợp với những trang web tĩnh, ít sự tương tác.
Nhược điểm Server-side
- Thường xuyên request tới máy chủ.
- Phải tải trang đầy đủ.
- Tương tác trang web không phong phú.
- Không thân thiện với người dùng.
Ưu điểm Client-side
- Tương tác trang web phong phú.
- website rendering nhanh sau lần tải đầu tiên.
- Phù hợp với ứng dụng web đòi hỏi độ tương tác cao.
- Có sự hỗ trợ của nhiều thư viện JavaScript như Vue, React, Angular.
Nhược điểm Client-side
- SEO thấp.
- Lần tải ban đầu có thể cần nhiều thời gian hơn.
- Trong hầu hết các trường hợp, yêu cầu một thư viện bên ngoài.
Tổng kết
Như vậy chúng ta vừa đi qua cách hoạt động của trang web dựa trên 2 phương pháp là server-side rendering vs client-side rendering. Tùy vào yêu cầu đối với mỗi trang web bạn có thể có sự lựa chọn hợp lí cho riêng mình.
Bài viết được lược dịch từ Client-side vs. server-side rendering: why it’s not all black and white.
Cảm ơn mọi người đã theo dõi bài viết!
Người viết: Nguyễn Hữu Sử
Có thể bạn quan tâm:
- Data scientist vs data analyst: những khác biệt mà bạn cần biết
- Unix vs Linux. Nguồn gốc và sự khác biệt
- [Become a SuperUser] Debian vs Redhat: Package Management System
Xem thêm việc làm Software Developers trên TopDev
TopDev via viblo.asia
