Server-Side và Client-side rendering

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. Hoạt động bằng cách chuyển đổi các tệp HTML trong máy chủ thành thông tin sử dụng cho trình duyệt.

Bất cứ khi nào bạn truy cập web, trình duyệt yêu cầu máy chủ trả về nội dụng trên trang web. 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

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, 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

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 không thành vấn đề lớn đối với 2 ví dụ này, nhưng hầu hết các 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. Với client-side rendering thì không hề đơn giản như vậy

Client-side rendering

Sau khi nói về Server-side. Chúng ta nói đếnclient-side rendering 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 chỉ cần một file 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.

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.html 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 thị 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

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

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.

Ưu và nhược điểm của từng phương pháp

Ở trên ta đã giải thích được cách mà 2 phương pháp Server-side và Client-side 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 hơn Server-side
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.

Kết luận

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.

Để viết một web hãy tham khảo Jade là gì ? Và cách sử Jade với NodeJS

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.