29/07/2019, 10:08

Client-side và Server-side rendering - Đâu là sự lựa chọn của bạn

Hồi xửa hồi xưa, các 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 cái trang HTML, sau đó máy chủ của bạn đã chuyển và biế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 ...

Hồi xửa hồi xưa, các 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 cái trang HTML, sau đó máy chủ của bạn đã chuyển và biế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 này, vì hầu hết các trang web hầu hết 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 giờ điều này 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 giả mảo. 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ộ so với trước kia.

Vậy nên việc render phía server bị chậm đi để tạo điều kiện cho việc render web ở phía client là hữu ích

Vậy đâu là sự lựa chọn tốt cho bạn, Nó phụ thuộc vào những gì bạn đang lên kế hoạch thực hiện cho trang web của mình. Bạn cần hiểu những ưu nhược điểm, sau đó tự quyết định đâu là sự lựa chọn tốt của bạn.

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ố

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 đang đượ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 có phiên bản 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.

<!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, trình duyệt tưởng tượng của bạn sẽ đưa ra yêu cầu đến máy chủ đang được sử dụng bởi URL đó và mong đợi 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 sẽ thấy trực quan sẽ là tiêu đề, nội dung đoạn văn và 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.

<!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.

Điều này có vẻ cũng không thành vấn đề lớn đối với 2 ví dụ này, 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. Đây cũng được coi như một lí do.

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

Khi các deverloper 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 nhần một tài liệu HTML đơn giản với JavaScript sẽ hiển thị phần còn lai của trang web bằng trình duyệt.

Đây là cách tiếp cận tương đối mới để rendering 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 hiện có file index.html với code như sau

<!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 đó, nbajn sẽ đặt dòng code sau vào file app.js

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ẽ là vấn đề lớn. 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.

Ở 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à bảng 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.

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 và 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.

Bình luận về bài viết này

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Client-side và Server-side rendering - Đâu là sự lựa chọn của bạn

Ưu điểm Server-side

Nhược điểm Server-side

Ưu điểm Client-side

Nhược điểm Client-side

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI