Problems With Server-Side Plugins in Nuxt.js

When you use server-side rendering in Nuxt, you can create highly dynamic and performant experiences. But, it relies on a node server which can be a bit tricky. In this article Josh Deltener explores one of the lesser-known issues with server-side plugins in Nuxt.

Josh Deltener
April 28, 2021

If you use Nuxt for server side rendering, at some point you'll likely need to use server side plugins. As a reminder, plugins are functions that can run server-side or client-side, once per user.

Runtime Environments

When you use plugins client-side they are pretty straight forward, each user has their own browser so every plugin is guaranteed to run in their own unique environment. But, when it comes to server-side plugins things get interesting. You have to remember that a Nuxt server is a running instance and all first hits to your site run though it. Each plugin does run per user server-side with new state and store but pretty much everything else stays in memory.

Learn Nuxt.js with the Mastering Nuxt course
The complete guide to developing and deploying production-ready Nuxt apps
See Course

Play Time

Here, let me show you something. Start a simple Nuxt project by using these commands:

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

Now lets create a simple server side plugin that does something magical when it encounters a query string. Lets also assume you're a stickler for performance and so you decide to declare your variable outside of your function.

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

    console.log(magicState)
}

Save this as plugins/test.server.js

Now add it to your Nuxt config file.

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

To keep this simple go to your local server (usually http://localhost:3000) and then view-source so you don't trigger anything else.

Problems with server side plugins in Nuxt

By now you should at least see this in your terminal.

Problems with server side plugins in Nuxt

Now update the url (in your view-source browser tab) by adding ?test=1

Problems with server side plugins in Nuxt

You should now see something like this

Problems with server side plugins in Nuxt

Alright, now remove ?test=1

Problems with server side plugins in Nuxt

Well That Was Unexpected

Hmm, nevermind.. Apparently this isn't a problem. This is going to be a short blog post.

(using my best announcer voice) BUT WAIT THERE'S MORE!!

Stop and start your dev server and do a build.

yarn build
yarn start

Problems with server side plugins in Nuxt

Problems with server side plugins in Nuxt

Now repeat the same steps.

Problems with server side plugins in Nuxt

Shows

Problems with server side plugins in Nuxt

Problems with server side plugins in Nuxt

Shows

Problems with server side plugins in Nuxt

Now update url back to

Problems with server side plugins in Nuxt

Shows

Problems with server side plugins in Nuxt

Holy #@$)^#!

That's right folks, in production that variable outside of the plugin is shared among ALL users.

Some of you may be shaking your head and saying, "no no no, I've been doing that for months and haven't had a problem."

ARE YOU SURE?

You probably are having problems and don't know it. Or worse yet, there is a problem just waiting to happen and you don't have enough traffic for it to appear.

I learned this the hard way when I first started using Nuxt. It wasn't until code was pushed into production when the problem first finally showed up. We were using server-side plugins for mobile detection and all of a sudden desktop users were randomly getting mobile experiences!! It was a tough lesson, but lucky for us we had a solid revert strategy already in place.

So, please learn from my (many) mistakes and be extra careful when using server-side plugins. Always declare your variables inside your plugins and test to make sure your app runs the same with 1 user, or 10,000 users!

Learn Nuxt.js with the Mastering Nuxt course
The complete guide to developing and deploying production-ready Nuxt apps
See Course
Josh Deltener
Josh is a true Nuxt Master. He has over 30 years of development experience and currently works as director of front-end technology at RealTruck. He is also a Nuxt ambassador and contributor.