- vừa được xem lúc

Cẩn thận với Server-Side Plugins trong Nuxt.js

0 0 91

Người đăng: Tran Dai Son

Theo Viblo Asia

Nếu bạn build một ứng dụng server-side rendering (SSR) với Nuxt.js, bạn hoàn toàn có thể tạo ra một ứng dụng với độ linh hoạt cao cùng với trải nghiệm hiệu suất tuyệt vời. Nhưng nó phụ thuộc vào một server node, điều này có thể mang lại một chút khó khăn cho bạn. Trong bài viết này, tác giả sẽ chỉ ra một issue mà ít được biết đến với SSR plugins trong nuxt.

Nếu bạn từng phát triển ứng dụng SSR với Nuxt, có thể bạn sẽ cần tạo ra một vài server-side plugins. Và như bạn đã biết, trong Nuxt, plugins có thể chạy server-side và client-side.

Môi trường rintime

Khi sử dụng plugins ở client-side thì khá đơn giản, mỗi người dùng có một trình duyệt riêng, thậm chí cùng một người dùng khi truy cập nhiều tab riêng biệt vẫn được, vì vậy luôn đảm bảo là mỗi plugin sẽ chạy trên môi trường của riêng nó. Nhưng khi ở server-side thì khác, mọi thứ không như là bạn nghĩ. Bạn cần phải ghi nhớ một điều là Nuxt server là một instance đang chạy và tất cả những lần truy cập đầu tiên của trang web đều sẽ "hit" server nuxt. Mỗi plugin chạy cho mỗi người dùng server-side với trạng thái mới của nó và được lưu trữ lại, nhưng hầu hết đều là lưu trữ trong bộ nhớ.

Play Time

Giờ tạo một project example đã, tôi sẽ chỉ cho bạn thấy

yarn create nuxt-app server-plugin-test
cd server-plugin-test
yarn dev

Kế đến tạo một plugin server-side đơn giản, có một biến magicState kiểm tra query của request tới server, và nó nằm ngoài hàm plugin được export.

let magicState = false
export default ({ route }) => { if (route.query.test) { magicState = true } console.log(magicState)
}

Lưu file ở đường dẫn: plugins/test.server.js

Sau đó thêm plugin vào Nuxt config file

plugins:[ '~/plugins/test.server'],

Để đơn giản, bạn hãy truy cập http://localhost:3000, sau đó view-source để đảm bảo là bạn không trigger thêm thứ gì khác, chỉ hit server nuxt thôi.

Giờ check lại trên terminal, chắc chắn bạn sẽ thấy false được in ra.

Rồi, giờ sửa 1 tí trên url, thêm query ?test=1

Bạn sẽ thấy trên terminal in ra như sau

Hoàn toàn bình trường, giờ hãy thử remove query lúc nãy đi ?test=1

Có gì lạ ở đây? mọi thứ đều bình thường.

Nhưng khoan, chưa.

Thử tắt dev server đi và build ra nào

yarn build
yarn start

Giờ tái hiện lại với step y chang lúc nãy

Trên terminal

Trên terminal

Sửa url lại như cũ

Và trên terminal

Trời ơi cái quần què zì zaay #@$)^#!

Vậy đó, trên môi trường production tất cả các biến bên ngoài plugin đều được shared cho tất cả users.

Đến đây có thể bạn sẽ lắc đầu ngao ngán, "no no no no..., tao code dự án cả mấy tháng trời rồi, gì đây sao tao chưa gặp bao giờ".

Bạn có thể đang gặp vấn đề mà không hề biết hoặc tệ hơn có thể vấn đề đang chực chờ xuất hiện khi bạn có đủ lượng truy cập.

Tôi đã dính chưởng và khá vất vả khi lần đầu tiên tiếp cận với nuxt, vì mãi đến khi lên production thì vấn đề mới lần đầu xuất hiện. Trường hợp của tôi là sử dụng một plugins ở phía server để phát hiện thiết bị di động, và đột nhiên một vài người dùng desktop nhập được giao diện di động! Một bài học thật đáng nhớ, nhưng may mắn là chúng tôi đã kịp thời revert lại code.

Vì vậy, hãy học hỏi từ (những) sai lầm của tôi và thật cẩn thận khi sử dụng những plugin server-side. Luôn luôn khai báo biến của bạn bên trong plugin, và kiểm tra cẩn thận để đảm bảo kết quả trả về hoàn toàn giống nhau dù với 1 hay 1.000 users.


Lược dịch từ https://masteringnuxt.com/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Google Login trong Nuxtjs

1. Auth. Authenticate là thứ rất quen thuộc của mỗi app, trong bài viết này mình sẽ giới thiệu auth module dành cho nuxt giúp bạn xử lý công việc này rất nhanh và dễ dàng. Trước hết là cài nuxt.

0 0 129

- vừa được xem lúc

Quản lý và sử dụng API trong Nuxt bằng cách sử dụng Repository Pattern

Mở đầu năm mới, à nhầm, mở đầu bài viết. Cái tên NuxtJS chắc hẳn cũng không còn xa lạ gì với những bạn yêu thích VueJS nữa, đương nhiên mình cũng là một chàng trai dành tình yêu to lớn cho frameworks này.

0 0 210

- vừa được xem lúc

Tôi đã dùng Service Pattern trong NuxtJS như thế nào ?

Giới thiệu. Trong quá trình làm VueJS NuxtJS hay thậm chí là Laravel mình cũng hay áp dụng các pattern như Service hoặc Repository.

0 0 58

- vừa được xem lúc

JWT Authentication với Vue/Nuxt

Authentication trong SPAs thường là một chủ đề hot, đối với những người không chắc chắn về cách thức triển khai một hệ thống authentication với đầy đủ tính năng - registration, login and access token

0 0 10

- vừa được xem lúc

[FE] [Nuxt3] [Tip] [Network] Làm chức năng hiển thị tình trạng kết nối mạng

Intro. .

0 0 13

- vừa được xem lúc

Tạo website kiết xuất phía máy chủ ( server side rendering ) với Angular Universal

Giới thiệu. Kiết xuất phía máy khách (CSR) là gì. . Đây là một phương pháp kết xuất hiện đại vì không có nhận toàn bộ trang HTML.

0 0 52