Kết xuất phía máy chủ là phương pháp phổ biến nhất để hiển thị 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 kể khi nào bạn truy cập web, trình duyệt yêu cầu máy chủ trả về nội dung trên trang web. Yêu cầu thông thường chỉ mất vài mili giây, nhưng điều đó cũng phụ thuộc vào yếu tố vô số - 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 hóa
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 sẽ 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ẽ gửi lạ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 có 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 vào trình duyệt của bạn. Trình duyệt tưởng tượng của bạn sẽ gửi 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ệtSự 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ẽ yêu cầu thêm phần nội dung mới và phần vẫn 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 kiện 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 trang web không đơn giản như vậy. Các trang web hiện đại có hàng trăm dòng mã và phức tạp hơn nhiều. Hãy tưởng tượng việc chờ duyệt một trang web và phải 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ư thế nào. This also was coi as a lí do Về mặt tích cực, <!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>
0 tốt cho <!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>
1. Với <!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>
2 thì không sáng đơn giản như vậyKết xuất phía máy kháchSau khi nói về Server-side. Chúng ta nói đến_______1_______2 đã hiển thị nội dung trong trình duyệt bằng <!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>
4. Vì vậy thay vì phải lấy tất cả nội dung từ tài liệu chính HTML, Bạn chỉ cần một tệp HTML đơn giản với <!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>
4 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 đối thủ tương lai để <!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>
8, và nó không thực sự là biến phổ biến cho đến khi các thư viện của <!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>
4 bắt đầu kết hợpQuay lại trang web ở trên, bạn hiện có tệp giả mạo <!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>
0 với mã 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 <!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>
2 Đối với thời kỳ mới bắt đầu, thay vì có nội dung bên trong HTML, bạn có một <!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>
3 với id là <!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>
4. Bạn cũng <!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>
5 đoạn 2 <!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>
6 là một thư viện <!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>
4 <!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>
8 và một tệp có tên <!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>
9Điều này hoàn toàn khác so với việc sử dụng <!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>
0 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 <!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>
4 phía 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',
});
2– trong ví dụ này là 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',
});
3Nế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 xuống vì nội dung thực tế cần được hiển thị bằng <!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>
4Để sửa điều đó, bạn sẽ đặt dòng mã sau vào tệp <!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>
9var 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 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',
});
7Sự khác biệtSự 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 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',
});
8 bằng trình duyệt, hãy làm điều đó, 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 đều được giữ nguyênViệc này nhanh hơn nhiều vì bạn chỉ tải xuống một phần rất nhỏ của trang để tìm tải nội dung mới, thay vì tải toàn bộ trang
Tuy nhiên, có một số sự thay đổi theo cách sử dụng <!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>
2. Do nội dung không được hiển thị cho đến khi trang được tải xuống trình duyệt. Vì vậ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>
1 cho trang web sẽ là vấn đề lớn. Có nhiều cách để giải quyết vấn đề này, nhưng nó không dễ dàng như với <!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>
0Ưu và nhược điểm của từng phương phápỞ trên ta giải thích là 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 ưu điểm và nhược điểm cho từng phương pháp Ưu điểm Phía máy chủ- 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 các trang web tĩnh, ít sự tương tác
Nhược điểm Server-side- Thường xuyên
request đến máy chủ - You must download full page
- 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 Phía khách hàngNhược điểm Phía khách hàng- SEO thấp hơn Phía máy chủ
- 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ậnNhư 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à <!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>
0 và <!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>
2. Tùy vào yêu cầu đối với mỗi trang web mà bạn có thể có sự lựa chọn hợp lý cho riêng mình | 
