Trường hợp sử dụng phổ biến nhất cho kết xuất phía máy chủ là xử lý kết xuất ban đầu khi người dùng (hoặc trình thu thập thông tin của công cụ tìm kiếm) yêu cầu ứng dụng của bạn lần đầu tiên

Khi máy chủ nhận được yêu cầu, nó sẽ hiển thị (các) thành phần được yêu cầu thành một chuỗi HTML, sau đó gửi nó dưới dạng phản hồi cho máy khách. Từ thời điểm đó, khách hàng đảm nhận nhiệm vụ kết xuất

MUI trên máy chủ

MUI được thiết kế từ đầu với sự hạn chế về kết xuất trên máy chủ, nhưng bạn phải đảm bảo rằng nó được tích hợp chính xác. Điều quan trọng là phải cung cấp CSS cần thiết cho trang, nếu không, trang sẽ hiển thị chỉ bằng HTML, sau đó đợi CSS được ứng dụng khách đưa vào, khiến trang bị nhấp nháy (FOUC). Để đưa phong cách xuống máy khách, chúng ta cần

1. Tạo một phiên bản

   function renderFullPage(html, css) {
     return `
       
       
         
           My page
           ${css}
           
           
         
         
           
   ${html}
         
       
     `;
   }
   

   2 mới, mới theo mọi yêu cầu
2. Kết xuất cây React với trình thu thập phía máy chủ
3. Kéo CSS ra
4. Truyền CSS cho khách hàng

Ở phía máy khách, CSS sẽ được chèn lần thứ hai trước khi xóa CSS đã chèn ở phía máy chủ

Đang cài đặt

Trong công thức sau đây, chúng ta sẽ xem xét cách thiết lập kết xuất phía máy chủ

chủ đề

Tạo một chủ đề sẽ được chia sẻ giữa máy khách và máy chủ

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

3

Phía máy chủ

Sau đây là phác thảo về phía máy chủ sẽ trông như thế nào. Chúng tôi sẽ thiết lập phần mềm trung gian Express bằng ứng dụng. sử dụng để xử lý tất cả các yêu cầu đến máy chủ. Nếu bạn không quen với Express hoặc phần mềm trung gian, hãy biết rằng hàm

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

4 sẽ được gọi mỗi khi máy chủ nhận được yêu cầu

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

5

Xử lý yêu cầu

Điều đầu tiên mà chúng ta cần làm đối với mọi yêu cầu là tạo một

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

2 mới

Khi kết xuất, chúng tôi sẽ bọc

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

7, thành phần gốc, bên trong một

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

8 và một

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

9 để tạo cấu hình kiểu và

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

0 có sẵn cho tất cả các thành phần trong cây thành phần

Bước quan trọng trong kết xuất phía máy chủ là kết xuất HTML ban đầu của thành phần trước khi chúng tôi gửi nó tới phía máy khách. Để làm điều này, chúng tôi sử dụng ReactDOMServer. renderToString()

MUI đang sử dụng Cảm xúc làm công cụ tạo kiểu mặc định. Chúng ta cần trích xuất các kiểu từ ví dụ Cảm xúc. Đối với điều này, chúng ta cần chia sẻ cùng một cấu hình bộ đệm cho cả máy khách và máy chủ

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

1

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css' });
}

Bản sao (hoặc $keyC)

Với điều này, chúng tôi đang tạo một phiên bản bộ đệm Cảm xúc mới và sử dụng phiên bản này để trích xuất các kiểu quan trọng cho html

Chúng ta sẽ thấy điều này được truyền như thế nào trong hàm

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

2

Tiêm thành phần ban đầu HTML và CSS

Bước cuối cùng ở phía máy chủ là đưa HTML và CSS thành phần ban đầu vào một mẫu để được hiển thị ở phía máy khách

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

Bản sao (hoặc $keyC)

Phía khách hàng

Phía khách hàng là đơn giản. Tất cả những gì chúng ta cần làm là sử dụng cấu hình bộ đệm giống như cấu hình phía máy chủ. Cùng xem qua tệp khách hàng

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

3

triển khai tham khảo

Chúng tôi lưu trữ các triển khai tham chiếu khác nhau mà bạn có thể tìm thấy trong kho lưu trữ GitHub trong thư mục

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

4

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 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

0 đượ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 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

1 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

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

2

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à 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}




`;
}

3 với cấu trúc DOM như sau

  
    
    
  
  
    
My Website
    
This is an example of my new website
    Link
  

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ẽ đư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 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

4 sau đây

________số 8

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

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

5

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

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

0 tốt cho 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

1. Với 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

2 thì không hề đơn giản như vậy

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

Sau khi nói về Server-side. Chúng ta nói đến

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

2 đã hiển thị nội dung trong trình duyệt bằng 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

4. Vì vậy thay vì phải lấy tất cả nội dung từ tài liệu chính 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

0, Bạn chỉ cần một tệp 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

0 đơn giản với 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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ủ cạnh tranh mới với 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

4 bắt đầu kết hợp

Quay lại trang web ở trên, giả sử bạn hiện có tệp 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

70 với mã như sau

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

7

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 _______ 82  Đối với người mới bắt đầu, thay vì có nội dung bên trong 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

0, bạn có một 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

73 với id là 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

74. Bạn 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}




`;
}

75 2 đoạn 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

76 là một thư viện 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

4 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

78 và một tệp có tên 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

79

Điều này hoàn toàn khác so với việc sử dụng 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

4 phía 

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css' });
}

92– trong ví dụ này là 

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css' });
}

93

Nếu bạn chỉ yêu cầu URL chỉ với đoạn 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

4 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 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

4

Để sửa điều đó, bạn sẽ đặt dòng mã sau vào tệp 

function renderFullPage(html, css) {
  return `
    
    
      
        My page
        ${css}
        
        
      
      
        
${html}
      
    
  `;
}

79

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css' });
}

9

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 

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css' });
}

97

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 

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css' });
}

98 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ên

Việ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 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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 

  function renderFullPage(html, css) {
    return `
      
      
        
          My page
          ${css}
          
          
        
        
          
  ${html}
        
      
    `;
  }
  

  1 đế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àng

• Tương tác trang web phong phú

• function renderFullPage(html, css) {
    return `
      
      
        
          My page
          ${css}
          
          
        
        
          
  ${html}
        
      
    `;
  }
  

  03 nhanh sau lần tải đầu tiên
• Phù hợp với ứng dụng web yêu cầu mức độ tương tác cao
• Có sự hỗ trợ của nhiều thư viện 

  
  
    
      
      
    
    
      
  My Website
      
  This is an example of my new website
      
  This is some more content from the other.html
    
  
  

  4 như 

  function renderFullPage(html, css) {
    return `
      
      
        
          My page
          ${css}
          
          
        
        
          
  ${html}
        
      
    `;
  }
  

  05, 

  function renderFullPage(html, css) {
    return `
      
      
        
          My page
          ${css}
          
          
        
        
          
  ${html}
        
      
    `;
  }
  

  06, 

  function renderFullPage(html, css) {
    return `
      
      
        
          My page
          ${css}
          
          
        
        
          
  ${html}
        
      
    `;
  }
  

  07

Nhượ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ậ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à 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.html
  

0 và 

  
    
    
  
  
    
My Website
    
This is an example of my new website
    
This is some more content from the other.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