VueJS: Vue.js Hướng dẫn hiển thị phía máy chủ

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

CHÚ THÍCH

Hướng dẫn này yêu cầu các phiên bản tối thiểu sau của Vue và thư viện hỗ trợ:

  • vue & vue-server-renderer 2.3.0+
  • vue-router 2.5.0+
  • vue-loader 12.0.0+ & vue-style-loader 3.0.0+

Nếu trước đó bạn đã sử dụng Vue 2.2 với SSR, bạn sẽ nhận thấy rằng cấu trúc mã được đề xuất bây giờ hơi khác một chút (với tùy chọn runInNewContext mới được đặt thành false). Ứng dụng hiện tại của bạn sẽ tiếp tục hoạt động nhưng bạn nên chuyển sang các đề xuất mới.

#Hiển thị phía máy chủ (SSR) là gì?

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 tạo và điều chỉnh DOM trong trình duyệt dưới dạng đầu ra. Tuy nhiên, nó cũng có thể đưa các thành phần tương tự vào các chuỗi HTML trên máy chủ, gửi chúng trực tiếp đến trình duyệt và cuối cùng "hydrate" đánh dấu tĩnh thành một ứng dụng tương tác hoàn toàn trên máy khách.

Ứng dụng Vue.js được kết xuất trên máy chủ cũng có thể được coi là "isomorphic" hoặc "universal", theo nghĩa là phần lớn mã ứng dụng của bạn chạy trên cả máy chủ và máy khách.

Tại sao sử dụng SSR?

So với SPA truyền thống (Single-Page Application), lợi thế của SSR chủ yếu nằm ở:

  • SEO tốt hơn, vì trình thu thập thông tin của công cụ tìm kiếm sẽ trực tiếp xem trang được hiển thị đầy đủ.

    Lưu ý rằng hiện tại, Google và Bing có thể lập chỉ mục các ứng dụng JavaScript đồng bộ tốt. Đồng bộ là từ khóa ở đó. Nếu ứng dụng của bạn bắt đầu bằng trình tải xuống, sau đó tìm nạp nội dung qua Ajax, thì trình thu thập thông tin sẽ không chờ bạn hoàn thành. Điều này có nghĩa là nếu bạn có nội dung được tìm nạp không đồng bộ trên các trang mà SEO quan trọng, SSR có thể là cần thiết.

  • Thời gian nội dung nhanh hơn, đặc biệt là khi mạng internet chậm hoặc các thiết bị có tốc độ load chậm. Đánh dấu được kết xuất bởi máy chủ không cần đợi cho đến khi tất cả JavaScript đã được tải xuống và được thực thi để hiển thị, vì vậy, người dùng của bạn sẽ sớm thấy trang được hiển thị hoàn chỉnh. Điều này thường mang lại trải nghiệm người dùng tốt hơn và có thể rất quan trọng đối với các ứng dụng có thời gian liên kết trực tiếp với tỷ lệ chuyển đổi.

Một số lưu ý khi sử dụng SSR:

  • Hạn chế phát triển. Mã trình duyệt cụ thể chỉ có thể được sử dụng trong một số vòng đời nhất định; một số thư viện bên ngoài có thể cần xử lý đặc biệt để có thể chạy trong ứng dụng được máy chủ trả về.

  • Yêu cầu xây dựng và triển khai các yêu cầu khác. Không giống như một SPA hoàn toàn tĩnh có thể được triển khai trên bất kỳ máy chủ tệp tĩnh nào, một ứng dụng được máy chủ trả về yêu cầu một môi trường nơi máy chủ Node.js có thể chạy.

  • Tải xuống phía máy chủ khác. Việc tạo một ứng dụng đầy đủ trong Node.js rõ ràng sẽ tốn nhiều CPU hơn là chỉ phục vụ các tệp tĩnh, vì vậy nếu bạn mong đợi lưu lượng cao, hãy chuẩn bị cho tải máy chủ tương ứng và sử dụng một cách khôn ngoan các chiến lược bộ nhớ đệm.

Trước khi sử dụng SSR cho ứng dụng của bạn, câu hỏi đầu tiên bạn nên hỏi là liệu bạn có thực sự cần nó hay không. Điều này chủ yếu phụ thuộc vào thời gian nội dung quan trọng đối với ứng dụng của bạn. Ví dụ, nếu bạn đang xây dựng một bảng điều khiển nội bộ, nơi một vài trăm mili giây trên tải ban đầu không quan trọng nhiều, SSR sẽ không cần thiết. Tuy nhiên, trong trường hợp thời gian nội dung (time-to-content) là cực kỳ quan trọng, SSR có thể giúp bạn đạt được hiệu suất tải ban đầu tốt nhất có thể.

SSR so với Prerendering (hiển thị trước)

Nếu bạn tìm hiểu SSR chỉ để cải thiện SEO của một số ít các trang tiếp thị (ví dụ /, /about, /contact, vv), sau đó bạn có thể muốn hiển thị trước các thay thế. Thay vì sử dụng máy chủ web để biên dịch HTML một cách nhanh chóng, việc hiển thị trước chỉ cần tạo các tệp HTML tĩnh cho các route cụ thể tại thời gian xây dựng. Ưu điểm là thiết lập hiển thị trước đơn giản hơn nhiều và cho phép bạn giữ giao diện người dùng của mình như một trang web hoàn toàn tĩnh.

Nếu bạn đang sử dụng webpack, bạn có thể dễ dàng thêm kết xuất trước bằng trình cắm sẵn-spa-plugin . Nó được thử nghiệm rộng rãi với các ứng dụng Vue - và trên thực tế, người sáng tạo là thành viên của nhóm lõi Vue.

Giới thiệu về Hướng dẫn này

Hướng dẫn này tập trung vào các ứng dụng đơn trang (Single Page Applications - SPA) được kết xuất trên máy chủ bằng cách sử dụng Node.js làm máy chủ. Trộn Vue SSR với các thiết lập phụ trợ khác là một chủ đề riêng và được thảo luận ngắn gọn trong một phần chuyên dụng.

Hướng dẫn này sẽ rất sâu và giả sử bạn đã quen với Vue.js, và có kiến ​​thức làm việc tốt về Node.js và webpack. Nếu bạn thích một giải pháp cấp cao hơn, cung cấp trải nghiệm vượt trội hơn , bạn có thể nên thử Nuxt.js. Nó được xây dựng dựa trên cùng một ngăn xếp Vue nhưng tóm tắt rất nhiều bản mẫu và cung cấp một số tính năng bổ sung như tạo trang tĩnh. Tuy nhiên, nó có thể không phù hợp với trường hợp sử dụng của bạn nếu bạn cần kiểm soát trực tiếp hơn cấu trúc của ứng dụng. Dù gì thì sẽ vẫn có ích khi đọc qua hướng dẫn này để hiểu rõ hơn cách mọi thứ hoạt động cùng nhau.

Khi bạn đọc cùng, nó sẽ rất hữu ích để tham khảo HackerNews Demo chính thức, sử dụng hầu hết các kỹ thuật được đề cập trong hướng dẫn này.

Cuối cùng, lưu ý rằng các giải pháp trong hướng dẫn này không dứt khoát - chúng tôi nhận thấy rằng các giải pháp này hoạt động tốt cho chúng tôi, nhưng điều đó không có nghĩa là chúng không thể được cải thiện.

» Tiếp: Bắt đầu với SSR
« Trước: Hot reloading
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!