There has been some changes and some settings were deprecated. SSR true or false? Let me break it down…
Nuxt.js is great! Their documentation is actually pretty good and they have a section in their FAQs on how to deploy on Netlify, but it doesn’t really tell the whole story in my opinion…
Changes in version 2.14
Since version 2.14, the mode property has been deprecated, you need to use SSR: false, but I guess this is not what you really want to deploy on Netlify, as it will generate a Single Page App with only one entry point, a big javascript that is not the best for SEO and crawlers. What you want (I guess) is explained in the next paragraph.
SSR: true and target: ‘static’
Let me explain what we are doing here:
ssr: true — this basically means: “I have a server where I can pre-render and store all the pages the nuxt’s crawler will be able to generate.” Pages will be generated in their respective routes physically on the server, so you will have something like /blog/my-blog-post.html and /blog/my-second-post.html in the final output. Obviously, Netlify being designed for static websites can handle this no problem
target: ‘static’ — that’s the key part. Netlify does not run an active server, it only serve pages. With Nuxt you could delegate some logic (like middlewares or some plugins) to run on an active server with target: 'universal' , but that’s not the case.
Keep in mind that for this reason, all your plugins that interact with the front-end MUST run with mode: client Here is an example with the famous TinySlider script:
plugins: [{ src: '~/plugins/tns.js', mode: 'client' }]
If you don’t do it, it will run in DEV environment but it won’t load once deployed on Netlify.
REDIRECT Dynamic routes
Last but not least: redirects.
But why? Haven’t we generated all the routes already? Not necessarily.
Let’s say we some page like /restaurant/restaurant-name and this name comes from a database. We don’t know in advance how may restaurant we have, could be one, could be one-thousand.
Our Nuxt app queries the DataBase when the user hits that page and will load the content accordingly (or throws an error). However this page is dynamic and does not exist physically on Netlify, which complains and shows a 404.
We can fix this with two lines in the netlify.toml
[[redirects]]from = “/restaurant/*”to = “/restaurant”
All the traffic -and the params -will be redirected to /restaurant (which is a valid route and where our logic is).
You can learn more about this here
Done! I hope this helps
