Beware of Server-Side Plugins in Nuxt.js

Tram Ho

If you build a server-side rendering (SSR) application with  Nuxt.js, you can completely create an application with high flexibility along with a great performance experience. But it depends on a server node, which can be a bit difficult for you. In this article, the author will point out a little-known issue with the SSR plugins in nuxt.

If you’ve ever developed an SSR application with Nuxt, you’ll probably need to create a few server-side plugins. And as you know, in Nuxt, plugins can run server-side and client-side.

Runtime environment

Using plugins on the client-side is quite simple, each user has a separate browser, even the same user can access many separate tabs, so always ensure that each plugin will run on the same environment. its own field. But when on the server-side it’s different, things are not as you think. One thing you need to keep in mind is that the Nuxt server is a running instance and all first visits to the site will “hit” the nuxt server. Each plugin runs for each user server-side with its new state and cached, but most are cached in memory.

Play Time

Let’s create a project example now, I’ll show you

Next create a simple server-side plugin that has a variable magicState check the request’s query to the server, and it’s outside the exported plugin function.

Save the file at the path: plugins/test.server.js

Then add the plugin to the Nuxt config file

For simplicity, please visit bạn http://localhost:3000, then view-source to make sure you don’t trigger anything else, just hit server nuxt.

Now check in terminal, you will definitely see false printed.

Okay, now fix a little on the url, add query ?test=1

You will see on the terminal print the following

Totally normal, now try the  remove query from earlier ?test=1

What’s strange here? everything is normal.

But wait, not yet.

Try turning off the dev server and build it

Now recreate it with the same steps as before

On terminal

On terminal

Fix the url again

And on the terminal

Oh my god #@$)^#!

That’s it, on the environment production all variables outside the plugin are shared for all users.

At this point, you will probably shake your head and say, “no no no no…, I’ve been coding the project for months, why have I never met before”.

You may have a problem without knowing it, or worse, it may be waiting to appear when you have enough traffic.

I was hit and had a hard time getting into nuxt for the first time, because it wasn’t until production that the problem first appeared. My case was using a plugin on the server side to detect mobile devices, and suddenly some desktop users entered the mobile interface! A lesson to remember, but luckily we were able to revert the code in time.

So learn from my mistake(s) and be very careful when using server-side plugins. Always declare your variables inside the plugin, and check carefully to make sure the results are exactly the same whether for 1 or 1,000 users.


Share the news now