CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết blog CFSDN này nói về các tính năng out-of-box của Nuxt, được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này thì nhớ like nhé.

trích dẫn

Gần đây Nuxt framework được sử dụng trong các dự án của hãng để thực hiện render màn hình đầu tiên phía server, đẩy nhanh tốc độ time-to-content nên tác giả bắt đầu tìm hiểu và sử dụng Nuxt. Sau đây là phần giới thiệu và phân tích một số tính năng của Nuxt từ góc độ mã nguồn.

ĐẶC TRƯNG

Kết xuất phía máy chủ (SSR)

Vue.js là một framework để xây dựng các ứng dụng phía máy khách. Theo mặc định, các thành phần Vue có thể được xuất ra trong trình duyệt để tạo DOM và vận hành DOM. Tuy nhiên, cũng có thể hiển thị các thành phần tương tự như chuỗi HTML phía máy chủ, gửi chúng trực tiếp đến trình duyệt và cuối cùng "kích hoạt" các thẻ tĩnh này thành một ứng dụng tương tác đầy đủ trên máy khách. ------Hướng dẫn Vue SSR.

Chương sử dụng cơ bản của hướng dẫn Vue SSR chính thức cung cấp cách triển khai kết xuất phía máy chủ ở cấp độ demo cũng được triển khai dựa trên chương này và quy trình chung gần như giống nhau. Bạn nên đọc hướng dẫn chính thức trước rồi đọc bài viết này, điều này sẽ mang lại lợi ích rất lớn.

Là một khung kết xuất phía máy chủ, Nuxt phải được ưu tiên hàng đầu để hiểu các nguyên tắc triển khai kết xuất phía máy chủ. Chúng ta hãy xem xét cách triển khai cụ thể của nó thông qua mã nguồn có liên quan.

Chúng tôi khởi động dự án Nuxt thông qua nuxt. Đầu tiên, nó sẽ thực thi phương thức startDev, sau đó gọi phương thức _listenDev để lấy cấu hình Nuxt và gọi phương thức getNuxt để khởi tạo Nuxt. Sau đó thực thi phương thức nuxt.ready() để tạo trình kết xuất.

1. // @nuxt/máy chủ/src/máy chủ.js 
2. sẵn sàng bất đồng bộ () { 
3.  // Khởi tạo vue-renderer 
4.  this.serverContext = new ServerContext(này) 
5.  this.renderer = new VueRenderer(this.serverContext) 
6.  chờ đợi this.renderer.ready() 
7.  
8.  // Thiết lập phần mềm trung gian nuxt 
9.  chờ đợi this.setupMiddleware() 
10.  
11.  trở lại cái này 
12. } 

This.setupMiddleware() sẽ được thực thi ở trạng thái sẵn sàng, nó sẽ gọi phần mềm trung gian nuxtMiddleware (đây là chìa khóa cho phản hồi).

1. // @nuxt/máy chủ/src/phần mềm trung gian/nuxt.js 
2. xuất khẩu mặc định ({tùy chọn, nuxt, renderRoute, tài nguyên }) => async chức năng nuxtMiddleware (yêu cầu, res, Kế tiếp) { 
3.  const context = getContext(req, res) 
4.  thử { 
5.    const url = chuẩn hóaURL(req.url) 
6.    res.statusCode = 200 
7.    const result = chờ đợi renderRoute(url, context) // Hiển thị tuyến đường tương ứng, tuyến đường này sẽ được mở rộng sau. 
8.     
9.    hằng số { 
10.      html, 
11.      được chuyển hướng, 
12.      Tải trước các tập tin 
13.   } = kết quả // lấy html 
14.  
15.    //Đặt trường tiêu đề 
16.    res.setHeader('Loại nội dung', 'text/html; charset=utf-8') 
17.    res.setHeader('Phạm vi chấp nhận', 'không có') 
18.    res.setHeader('Độ dài nội dung', Bộ đệm. byteLength(html)) 
19.    độ phân giảikết thúc(html, 'utf8') // trả lời 
20.    trở lại html 
21. } bắt (err) { 
22.    nếu (bối cảnh && bối cảnh.được chuyển hướng) { 
23.      console.error(err) 
24.      trở lại lỗi 
25.   } 
26.    Kế tiếp(lầm) 
27. } 
28. } 

Phần mềm trung gian nuxtMiddleware trước tiên chuẩn hóa URL được yêu cầu, đặt mã trạng thái yêu cầu, khớp tuyến đường tương ứng thông qua URL, hiển thị thành phần định tuyến tương ứng, đặt thông tin tiêu đề và cuối cùng phản hồi.

1. renderSSR (renderContext) { 
2.  // Gọi renderToString từ bóRenderer Và tạo ra HTML (sẽ cập nhật renderContext BẰNG Tốt) 
3.  // renderSSR chỉ là phương thức kết xuất của ứng dụng phổ quát Nuxt cũng có thể phát triển các dự án SPA thông thường. 
4.  const renderer = renderContext.modern ? this.renderer.modern : this.renderer.SSR 
5.  trở lại render.render(renderContext) 
6. } 

Phương thức renderRoute sẽ gọi renderSSR của @nuxt/vue-render để thực hiện các hoạt động kết xuất phía máy chủ.

1. // @nuxt/vue-renderer/src/renderers/SSR.js 
2. kết xuất không đồng bộ (renderContext) { 
3.  // Gọi trình kết xuất Vue renderToString 
4.  hãy để APP = chờ this.vueRenderer.renderToString(renderContext) 
5.  
6.  hãy để HEAD = '' 
7.  // ... n dòng mã ghép HEAD bị bỏ qua ở đây, phần này sẽ được đề cập trong phần quản lý HEAD tiếp theo. 
8.     
9.  // Kết xuất với Mẫu SSR 
10.  const html = this.renderTemplate(this.serverContext.resources.SSRTemplate, templateParams) 
11.  
12.  trở lại { 
13.    html, 
14.    Tải trước các tập tin 
15. } 
16. } 

renderSSR sẽ gọi phương thức renderer.render để hiển thị tuyến đường khớp với url thành một chuỗi, kết hợp chuỗi đó với mẫu và lấy html cuối cùng được trả về trình duyệt. Tại thời điểm này, quá trình hiển thị phía máy chủ Nuxt đã hoàn tất. .

Cuối cùng, tôi đăng biểu đồ luồng thực thi Nuxt bị đánh cắp. Hình ảnh rất đẹp và quy trình rất rõ ràng. Cảm ơn bạn.

Tìm nạp dữ liệu

Trong chương trình máy khách (CSR), dữ liệu có thể được lấy thông qua hook được gắn, nhưng trong chương trình phổ quát (Universal), cần có một hook cụ thể để lấy dữ liệu ở phía máy chủ.

Nuxt chủ yếu cung cấp hai hook để lấy dữ liệu.

• không đồng bộDữ liệu
  • Nó chỉ có thể được lấy từ các thành phần cấp trang và không thể truy cập được.
  • Lưu trạng thái dữ liệu bằng cách trả về đối tượng hoặc hợp tác với Vuex để lưu trạng thái
• tìm về
  • Nó có sẵn trong tất cả các thành phần và có thể truy cập vào đây
  • Không cần phải chuyển theo ngữ cảnh. Việc chuyển theo ngữ cảnh sẽ chuyển sang phiên bản tìm nạp cũ và chức năng của nó tương tự như asyncData.

1. // .nuxt/máy chủ.js 
2. // Các thành phần đã được giải quyết qua setContext -> getRouteData (ứng dụng/utils.js) 
3. const Components = getMatchedComponents(app.context.route) 
4.   
5. // Trong lộ trình phù hợp, hãy gọi asyncData và phiên bản kế thừa tìm vềphương pháp 
6. const asyncDatas = await Lời hứa.tất cả(Components.map((Thành phần) => { 
7.  const lời hứa = [] 
8.  
9.  // Gọi asyncData(context) 
10.  nếu (Component.options.asyncData && typeof Component.options.asyncData === 'chức năng') { 
11.    const promise = promisify(Component.options.asyncData, app.context) 
12.    hứa.sau đó((asyncDataResult) => { 
13.      SSRContext.asyncData[Thành phần.cid] = asyncDataResult 
14.      áp dụngAsyncData(Thành phần) 
15.      trở lại asyncDataKết quả 
16.   }) 
17.    lời hứa.push(lời hứa) 
18.   } khác { 
19.      lời hứa.đẩy(vô giá trị) 
20.   } 
21.  
22.    // Gọi phiên bản kế thừatìm về(ngữ cảnh) Tương thích với các phiên bản cũ hơn tìm về 
23.    nếu (Component.options.tìm về && Tùy chọn thành phần.tìm về.chiều dài) { 
24.      promises.push(Component.options.tìm về(ứng dụng.bối cảnh)) 
25.   } khác { 
26.    lời hứa.đẩy(vô giá trị) 
27. } 
28.  
29.  trở lại Hứa.tất cả(hứa hẹn) 
30. })) 

Trong .nuxt/server.js được tạo, các thành phần phù hợp sẽ được duyệt qua để kiểm tra xem tùy chọn asyncData và phiên bản tìm nạp cũ có được xác định trong thành phần hay không. Nếu chúng tồn tại, chúng sẽ được gọi theo trình tự để lấy asyncDatas.

1. // .nuxt/mixins/tìm về.server.js  
2. // nuxt v2.14 trở lên 
3. không đồng bộ chức năng máy chủ tải trước() { 
4.  // Gọi Và chờ đợi TRÊN $tìm về 
5.  // Được khuyến nghị sau v2.14 tìm về 
6.  thử { 
7.    chờ đợi điều này.$options.tìm về.gọi(cái này) 
8. } bắt (err) { 
9.    nếu (process.dev) { 
10.      console. lỗi('Lỗi trong fetch():', lỗi) 
11.   }  
12. } 
13.  cái này.$fetchState.pending = SAI // Đặt trạng thái tìm nạp thành SAI 
14. } 

Sau khi phiên bản vue được khởi tạo ở phía máy chủ, serverPrefetch được thực thi, phương thức tùy chọn tìm nạp được kích hoạt và dữ liệu sẽ được sử dụng trong quá trình tạo HTML.

Quản lý HEAD (Thẻ meta và SEO)

Hiện tại, Google và Bing lập chỉ mục các ứng dụng JavaScript đồng bộ rất tốt. Tuy nhiên, đối với các trang web lấy dữ liệu không đồng bộ, các công cụ tìm kiếm chính thống vẫn chưa thể hỗ trợ, dẫn đến thứ hạng tìm kiếm của trang web bị thấp. Do đó, hy vọng đạt được SEO tốt hơn đã trở thành lý do khiến nhiều trang web cân nhắc sử dụng khung SSR.

Để có được SEO tốt, cần phải tiến hành cấu hình và quản lý HEAD tinh tế. Hãy xem nó được thực hiện như thế nào nhé~.

Khung Nuxt sử dụng thư viện vue-meta để tùy chỉnh các thẻ meta trang chung và riêng lẻ. Việc triển khai nội bộ của Nuxt gần như tuân theo quy trình quản lý meta SSR chính thức của vue-meta. Vui lòng kiểm tra để biết chi tiết cụ thể.

1. // @nuxt/vue-app/template/chỉ số.js 
2. // bước 1 
3. Vue.use(Meta, JSON.stringify(vueMetaOptions)) 
4.  
5. // @nuxt/vue-app/template/template.js 
6. // bước 2 
7. xuất khẩu mặc định không đồng bộ (SSRContext) => { 
8.  const _app = new Vue(ứng dụng) 
9.  // Thêm vào thông tin meta (đã sử dụng TRONG renderer.js) 
10.  SSRContext.meta = _app.$meta() 
11.  trở lại _ứng dụng 
12. } 

Đầu tiên, hãy đăng ký vue-meta dưới dạng một plug-in Vue và thuộc tính $meta sẽ được gắn bên trong trên nguyên mẫu Vue. Sau đó thêm meta vào ngữ cảnh hiển thị phía máy chủ.

1. kết xuất không đồng bộ (renderContext) { 
2.    // Gọi trình kết xuất Vue renderToString 
3.    hãy để APP = chờ this.vueRenderer.renderToString(renderContext) 
4.    // bước 3 
5.    hãy để HEAD = '' 
6.  
7.    // Tiêm meta đầu 
8.    // (cái này là bỏ đặt khi tính năng.meta là SAI TRONG mẫu máy chủ) 
9.    // Sau đây là n dòng mã ghép HEAD bị bỏ qua ở trên, có thể bỏ qua một cách thích hợp. 
10.    // Chỉ cần hiểu quy trình chính, kiểm tra các chi tiết cụ thể khi cần thiết 
11.    hằng số meta = renderContext.meta && renderContext.meta.inject({ 
12.      isSSR: renderContext.nuxt.serverRendered, 
13.      ln: this.options.dev 
14.   }) 
15.  
16.    nếu (siêu) { 
17.      ĐẦU += meta.title.text() + meta.meta.text() 
18.   } 
19.  
20.    nếu (siêu) { 
21.      ĐẦU += meta.link.text() + 
22.        meta.style.text() + 
23.        meta.script.text() + 
24.        meta.noscript.text() 
25.   } 
26.  
27.    // Kiểm tra nếu chúng ta cần ĐẾN tiêm tập lệnh Và tình trạng 
28.    const shouldInjectScripts = this.options.render.injectScripts !== SAI 
29.  
30.    // Chèn gợi ý tài nguyên 
31.    nếu (this.options.render.resourceHints && shouldInjectScripts) { 
32.      HEAD += this.renderResourceHints(renderContext) 
33.   } 
34.  
35.    // Tiêm các kiểu 
36.    HEAD += this.renderStyles(renderContext) 
37.  
38.  
39.    // Thêm các tập lệnh vào trước 
40.    nếu (shouldInjectScripts) { 
41.      ỨNG DỤNG += this.renderScripts(renderContext) 
42.   } 
43.  
44.    nếu (siêu) { 
45.      const appendInjectorOptions = { thân: ĐÚNG VẬY } 
46.      // Thêm các tập lệnh thân bài 
47.      ỨNG DỤNG += meta.meta.text(appendInjectorOptions) 
48.      ỨNG DỤNG += meta.link.text(appendInjectorOptions) 
49.      ỨNG DỤNG += meta.style.text(appendInjectorOptions) 
50.      ỨNG DỤNG += meta.script.text(appendInjectorOptions) 
51.      ỨNG DỤNG += meta.noscript.text(appendInjectorOptions) 
52.   } 
53.  
54.    // Tham số mẫu 
55.    hằng số mẫuParams = { 
56.      HTML_ATTRS: meta ? meta.htmlAttrs.text(renderContext.nuxt.serverRendered /* addSrrAttribute */) : '', 
57.      HEAD_ATTRS: meta ? meta.headAttrs.text() : '', 
58.      BODY_ATTRS: meta ? meta.bodyAttrs.text() : '', 
59.      CÁI ĐẦU, 
60.      ỨNG DỤNG, 
61.      ENV: tùy chọn này.env 
62.   } 
63.  
64.    // Kết xuất với Mẫu SSR 
65.    // Tạo html thông qua các mẫu và tham số 
66.    const html = this.renderTemplate(this.serverContext.resources.SSRTemplate, templateParams) 
67.  
68.    hãy tải trước các tập tin 
69.    nếu (this.options.render.http2.push) { 
70.      // Lấy các file cần tải trước 
71.      preloadFiles = this.getPreloadFiles(renderContext) 
72.   } 
73.  
74.    trở lại { 
75.      html, 
76.      tải trước các tập tin， 
77.   } 
78. } 

Cuối cùng, đưa siêu dữ liệu vào html phản hồi.

Định tuyến hệ thống tệp

Những sinh viên đã sử dụng Nuxt chắc chắn sẽ bị ấn tượng bởi tính năng tạo tuyến đường dựa trên các tệp. Hãy để tôi xem cách Nuxt triển khai việc tạo tuyến đường tự động dựa trên thư mục trang (có thể định cấu hình) từ góc độ mã nguồn.

Đầu tiên, khi bắt đầu dự án Nuxt hoặc sửa đổi tệp, phương thức generateRoutesAndFiles sẽ tự động được gọi để tạo các tuyến và tệp trong thư mục .nuxt.

1. // @nuxt/builder/src/builder.js 
2. không đồng bộ generateRoutesAndFiles() { 
3.   ... 
4.   chờ đợi Lời hứa.tất cả([ 
5.     này.resolveLayouts(templateContext), 
6.     this.resolveRoutes(templateContext), //Giải quyết và tạo các tuyến đường, những điểm chính cần chú ý 
7.     this.resolveStore(templateContext), 
8.     this.resolveMiddleware(templateContext) 
9.   ]) 
10.   ... 
11. } 

Có ba tình huống khi phân tích các tuyến: thứ nhất, tên thư mục trang mặc định được sửa đổi và thư mục liên quan không được định cấu hình trong nuxt.config.js. Thứ hai, thư mục các trang mặc định của nuxt được sử dụng; thứ ba, các tuyến do người dùng xác định được tạo bằng cách gọi; Phương pháp tạo đường đi.

1. // @nuxt/builder/src/builder.js 
2. bất đồng bộ giải quyết tuyến đường({templateVars}) { 
3.   console.debug('Đang tạo tuyến đường...') 
4.   nếu (this._defaultPage) { 
5.     // Không tìm thấy thư mục trang trong srcDir 
6.   } khác nếu (this._nuxtPage) { 
7.     // Sử dụng nuxt để tạo tuyến đường động 
8.   } khác { 
9.     // Người dùng cung cấp các phương thức tùy chỉnh để tạo tuyến đường và cung cấp cho người dùng khả năng tùy chỉnh tuyến đường. 
10.   } 
11.   // phương thức router.extendRoutes 
12.   nếu (typeof this.options.router.extendRoutes === 'chức năng') { 
13.     const extendedRoutes = chờ tùy chọn này.router.extendRoutes( 
14.       templateVars.router.routes, 
15.       giải quyết 
16.     ) 
17.     nếu (extendedRoutes !== không xác định) { 
18.       templateVars.router.routes = mở rộng tuyến đường 
19.     } 
20.   } 
21. } 

Ngoài ra, bạn cũng có thể cung cấp phương thức ExtendRoutes tương ứng để thêm các tuyến tùy chỉnh dựa trên các tuyến được tạo bởi nuxt.

1. xuất khẩu mặc định { 
2.   bộ định tuyến: { 
3.     extendRoutes(tuyến đường, giải quyết) { 
4.       // Ví dụ: thêm trang 404 
5.       tuyến đường.đẩy({ 
6.         tên: 'phong tục', 
7.         con đường: '*', 
8.         thành phần: giải quyết(__dirname, 'trang/404.view') 
9.       }) 
10.     } 
11.   } 
12. } 

Khi thư mục trang mặc định được sửa đổi và không thể tìm thấy thư mục liên quan, tệp @nuxt/vue-app/template/pages/index.vue sẽ được sử dụng để tạo các tuyến đường.

1. bất đồng bộ giải quyết tuyến đường({templateVars}) { 
2.   nếu (this._defaultPage) { 
3.     // Phương thức createRoutes tạo các tuyến dựa trên các tham số đã truyền. Thuật toán cụ thể sẽ không được mở rộng. 
4.     templateVars.router.routes = createRoutes({ 
5.       tập tin: ['index.view'], 
6.       srcDir: this.template.dir + '/trang', // Trỏ tới @nuxt/vue-app/template/pages/chỉ số.xem 
7.       RouteNameSplitter, // Dấu phân cách tên tuyến, mặc định `-` 
8.       dấu gạch chéo cuối // dấu gạch chéo cuối / 
9.     }) 
10.   } khác nếu (this._nuxtPage) { 
11.     các tập tin const = {} 
12.     const ext = new RegExp(`\\.(${this.supportedExtensions.tham gia('|')})$`) 
13.     vì (trang const của đang chờ this.resolveFiles(this.options.dir.pages)) { 
14.       hằng số chìa khóa = trang.thay thế(mở rộng, '') 
15.       // Tệp .vue được ưu tiên hơn các phần mở rộng khác 
16.       nếu (/\.vue$/.test(trang) || !files[chìa khóa]) { 
17.         tập tin[chìa khóa] = trang.thay thế(/(['"])/g, '\\$1') 
18.       } 
19.     } 
20.     templateVars.router.routes = createRoutes({ 
21.       tập tin: Đối tượng.giá trị(tập tin), 
22.       srcDir: this.options.srcDir, 
23.       pagesDir: this.options.dir.pages, 
24.       RouteNameSplitter, 
25.       supportedExtensions: this.supportedExtensions, 
26.       dấu gạch chéo theo sau 
27.     }) 
28.     } khác { 
29.       templateVars.router.routes = chờ this.options.build.createRoutes(this.options.srcDir) 
30.     } 
31.     // phương thức router.extendRoutes 
32.     nếu (typeof this.options.router.extendRoutes === 'chức năng') { 
33.       const extendedRoutes = chờ tùy chọn này.router.extendRoutes( 
34.         templateVars.router.routes, 
35.         giải quyết 
36.       ) 
37.       nếu (extendedRoutes !== không xác định) { 
38.         templateVars.router.routes = mở rộng tuyến đường 
39.       } 
40.   } 
41. } 

Sau đó gọi phương thức createRoutes để tạo tuyến đường. Tuyến đường được tạo trông gần giống như thế này, gần giống với tệp tuyến đường được viết thủ công (nó sẽ được đóng gói và tải từng phần để giới thiệu các thành phần định tuyến sau này).

1. [ 
2.   { 
3.     tên: 'chỉ số', 
4.     con đường: '/', 
5.     Tên chunk: 'trang/chỉ mục', 
6.     thành phần: 'Người dùng/tên người dùng/tên dự án/trang/index.vue' 
7.   }, 
8.   { 
9.     tên: 'Về', 
10.     con đường: '/Về', 
11.     Tên chunk: 'trang/giới thiệu/chỉ mục', 
12.     thành phần: 'Người dùng/tên người dùng/tên dự án/trang/giới thiệu/index.vue' 
13.   } 
14. ] 

Tìm nạp trước thông minh

Bắt đầu từ Nuxt v2.4.0, khi xuất hiện ở vùng hiển thị, Nuxt sẽ tìm nạp trước tập lệnh trang được phân tách mã, để trước khi người dùng nhấp vào, địa chỉ mà tuyến đường trỏ đến sẽ ở trạng thái sẵn sàng, điều này sẽ vô cùng tuyệt vời. cải thiện trải nghiệm người dùng.

Logic triển khai có liên quan tập trung ở .nuxt/comComponents/nuxt-link.client.js.

Trước hết, việc triển khai tính năng Tìm nạp trước thông minh dựa trên cửa sổ API thử nghiệm.IntersectionObserver. Nếu trình duyệt không hỗ trợ API này, thao tác tìm nạp trước thành phần sẽ không được thực hiện.

1. gắn kết () { 
2.   nếu (this.prefetch && !this.noPrefetch) { 
3.     this.handleId = requestIdleCallback(this.observe, { thời gian chờ: 2e3 }) 
4.   } 
5. } 

Sau đó, trong giai đoạn gắn thành phần cần được tìm nạp trước, phương thức requestIdleCallback được gọi và phương thức quan sát được gọi trong khoảng thời gian không hoạt động của trình duyệt.

1. const observer = window.IntersectionObserver && new window.IntersectionObserver((entries) => { 
2.   mục nhập.forEach(({intersectionRatio, mục tiêu: liên kết }) => { 
3.     // Nếu crossoverRatio nhỏ hơn hoặc bằng 0, điều đó có nghĩa là mục tiêu không nằm trong khung nhìn 
4.     nếu (intersectionRatio <= 0 || !link.__prefetch) { 
5.       trở lại 
6.     } 
7.     // Tìm nạp trước dữ liệu (thực chất là tải các thành phần) 
8.     liên kết.__prefetch() 
9.   }) 
10. }) 

Khi trạng thái trực quan của phần tử được giám sát thay đổi (và xuất hiện trong chế độ xem), lệnh gọi lại của window.IntersectionObserver(callback) mới sẽ được kích hoạt để thực hiện thao tác tìm nạp trước thực tế prefetchLink.

1. liên kết nạp trước () { 
2.   // Xác định môi trường mạng Trong môi trường ngoại tuyến hoặc 2G, không có thao tác tìm nạp trước nào được thực hiện. 
3.   nếu (!this.canPrefetch()) { 
4.     trở lại 
5.   } 
6.   // Dừng nghe phần tử này để cải thiện hiệu suất 
7.   observer.unobserve(this.$el) 
8.   const Components = this.getPrefetchComponents() 
9.  
10.   vì (const Thành phần của Thành phần) { 
11.     //Load thành phần kịp thời để khi người dùng click vào, thành phần đó ở trạng thái sẵn sàng 
12.     const componentOrPromise = Thành phần() 
13.     nếu (componentOrPromise thể hiện của Promise) { 
14.       thành phầnOrPromise.catch(() => {}) 
15.     Thành phần.__đã tải trước = ĐÚNG VẬY // Gắn cờ các bit đã được tìm nạp trước 
16.   } 
17. } 

Tóm tắt

Phần trên mô tả cách triển khai kết xuất phía máy chủ Nuxt, thu thập dữ liệu phía máy chủ và một số tính năng sẵn có của Nuxt từ góc độ mã nguồn: quản lý HEAD, định tuyến dựa trên hệ thống tệp và tìm nạp trước thông minh định tuyến chia mã. Nếu bạn muốn tiến hành nghiên cứu chuyên sâu hơn về SSR, bạn cũng có thể tìm hiểu cách triển khai SSR của React sau này.

Tôi hy vọng nó sẽ hữu ích cho bạn Nếu có bất kỳ sai sót nào, vui lòng sửa chúng.

thẩm quyền giải quyết

Tại sao nên sử dụng kết xuất phía máy chủ (SSR)?

Đọc chuyên sâu mã nguồn Nuxt.

Vue Meta.

Giới thiệu về tính năng tải trước thông minh.

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

Liên kết gốc: https://mp.weixin.qq.com/s/fvv12ZPxiEpCzER3Q-X5pQ.

Cuối cùng, bài viết nói về các tính năng sẵn có của Nuxt kết thúc ở đây. Nếu bạn muốn biết thêm về cách nói về các tính năng sẵn dùng của Nuxt, vui lòng tìm kiếm các bài viết về CFSDN hoặc tiếp tục duyệt các bài viết liên quan. ủng hộ blog của tôi trong tương lai! .