VueJS: Viết mã phổ dụng (Universal)

Trước khi tiếp tục, chúng ta hãy dành một chút thời gian để thảo luận về các ràng buộc khi viết mã "phổ quát" - tức là, mã chạy trên cả máy chủ lẫn máy khách. Do sự khác biệt về trường hợp sử dụng và nền tảng API, hành vi của mã của chúng ta sẽ không giống chính xác khi chạy trong các môi trường khác nhau. Ở đây chúng ta sẽ đi qua những điều quan trọng bạn cần phải nhận thức được.

Khả năng phản ứng dữ liệu trên máy chủ

Trong ứng dụng chỉ dành cho ứng dụng khách, mọi người dùng sẽ sử dụng phiên bản ứng dụng mới trong trình duyệt của họ. Đối với hiển thị phía máy chủ, chúng tôi muốn giống nhau: mỗi yêu cầu phải có một phiên bản ứng dụng mới, được tách biệt để không có ô nhiễm trạng thái chéo yêu cầu.

Do quá trình dựng hình thực tế cần phải xác định, nên dữ liệu sẽ là "tìm nạp trước" trên máy chủ - điều này có nghĩa là trạng thái ứng dụng của chúng ta sẽ được giải quyết khi bắt đầu hiển thị. Điều này có nghĩa là phản ứng dữ liệu là không cần thiết trên máy chủ, vì vậy nó bị vô hiệu hóa theo mặc định. Việc vô hiệu hóa phản ứng dữ liệu cũng tránh được chi phí hiệu suất của việc chuyển đổi dữ liệu thành các đối tượng phản ứng.

Thành phần Vòng đời

Vì không có bản cập nhật động của tất cả các vòng đời, nên chỉ beforeCreate và created sẽ được gọi trong SSR. Điều này có nghĩa là bất kỳ mã nào bên trong các vòng đời khác chẳng hạn như beforeMount hoặc mounted sẽ chỉ được thực hiện trên máy khách.

Một điều cần lưu ý là bạn nên tránh mã tạo ra các tác dụng phụ toàn cầu trong beforeCreate và created, ví dụ như thiết lập bộ hẹn giờ với setInterval. Trong mã lệnh chỉ ở phía máy khách, chúng ta có thể thiết lập một bộ đếm thời gian và sau đó tách nó xuống beforeDestroy hoặc destroyed. Tuy nhiên, vì các hook hủy sẽ không được gọi trong SSR, nên các bộ đếm thời gian sẽ ở đó mãi mãi. Để tránh điều này, hãy di chuyển mã lệnh hiệu ứng phụ của bạn vào  beforeMount hoặc mounted thay thế.

Truy cập vào các nền tảng API cụ thể

Mã chung không thể giả sử truy cập vào các API nền tảng cụ thể, vì vậy nếu mã của bạn trực tiếp sử dụng chỉ các trình duyệt global như window hoặc document, thì chúng sẽ ném lỗi khi được thực thi trong Node.js và ngược lại.

Đối với các tác vụ được chia sẻ giữa máy chủ và ứng dụng khách nhưng sử dụng các nền tảng API khác nhau thì bạn nên triển khai nền tảng cụ thể bên trong API chung hoặc sử dụng thư viện để thực hiện điều này cho bạn. Ví dụ, các axios là một máy khách HTTP cùng một API cho cả máy chủ và máy khách.

Đối với các API chỉ dành cho trình duyệt, cách tiếp cận chung là truy cập lazy chúng bên trong các vòng đời của máy khách.

Lưu ý rằng nếu thư viện của bên thứ ba không được ghi nhớ với mức sử dụng toàn cầu, có thể sẽ phức tạp khi tích hợp nó vào ứng dụng được kết xuất trên máy chủ. Bạn có thể làm cho nó hoạt động bằng cách mocking  một số global, nhưng nó sẽ bị hack và có thể ảnh hưởng đến mã lệnh phát hiện môi trường của các thư viện khác.

Chỉ thị tùy chỉnh

Hầu hết các chỉ thị tùy chỉnh trực tiếp thao tác DOM và do đó sẽ gây ra lỗi trong SSR. Có hai cách để giải quyết vấn đề này:

1. Ưu tiên sử dụng các thành phần làm cơ chế trừu tượng và làm việc ở cấp Virtual-DOM (ví dụ: sử dụng hàm render).

2. Nếu bạn có một chỉ thị tùy chỉnh mà không thể dễ dàng được thay thế bởi các thành phần, bạn có thể cung cấp "phiên bản phía máy chủ" của nó bằng cách sử dụng directives tùy chọn khi tạo trình kết xuất máy chủ.