How to deal with data not being updated in Nuxt.js deployment
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
⇨ Click here for the table of contents of Vue articles
This article summarizes what to do when the data from deployment is always displayed and newly added data is not reflected when making direct URL or screen updates in Nuxt.js.
Environment
Nuxt2.15.7Conclusion
It is highly likely that this is related to SSG.
Modify nuxt.config.js
For SSG
{
mode: 'universal',
target: 'static',
}change to,
SSR
{
mode: 'universal',
target: 'server',
}or, SPA
{
mode: 'spa',
target: 'static',
}What is SSG?
It seems to be called "Static Site Generator".
In other words, it is something suitable for static sites.
It retrieves necessary data at deployment time, stores it in JSON, and uses it for display.
In other words, instead of fetching data from the database every time a user visits, it only needs to connect once at deployment time.
In other words, it's fast.
In other words, it's fast.
This blog is not made with Nuxt, but it is made with SSG.
What was the case this time?
The reason why the added data is not being retrieved is that the page is not making a database connection even when updated.
At this point, there may be browser caching or server-side caching of search results (recalculated by time).
Since the data from deployment is always displayed, it was found that the data is fetched altogether at deployment time.
As can be understood from the explanation above, it aligns with the characteristics of SSG, so when nuxt.config.js was modified to SSR, the behavior changed as expected!
Summary
This article provided a solution to the issue of data always being displayed at deployment and discussed SSG!
Nuxt.js is very convenient. I think Nuxt is better than doing VueCLI!
If you have complaints or corrections, please contact me via DM on Twitter below.
That's all!
