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
1 2 3 4 | yarn create nuxt-app server-plugin-test cd server-plugin-test yarn dev |
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.
1 2 3 4 5 6 7 8 | <span class="token keyword">let</span> magicState <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> route <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>test<span class="token punctuation">)</span> <span class="token punctuation">{</span> magicState <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>magicState<span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Save the file at the path: plugins/test.server.js
Then add the plugin to the Nuxt config file
1 2 | plugins<span class="token operator">:</span><span class="token punctuation">[</span> <span class="token string">'~/plugins/test.server'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
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
1 2 3 | yarn build yarn start |
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.
Synopsis: https://masteringnuxt.com/