generate vs prerender
I have a site which is mainly static, but has a couple of
server/api endpoints.
From what I understand / have experienced in development, I can't use nuxi generate as I need a live Nitro instance to manage API requests.
As the site is static, but I need Nitro, should I use route rules to prerender everything?
I just want to get clear on a) the best pipeline to get the best performance and b) to have a better understanding of what Nuxt does to give users a site (as it's not like PHP where you can see the phsical files from the outset).
From what I can see in the .output folder:
- nuxi generate / serve creates / serves .html files and payloads from public/path/to/file
- nuxi build / preview creates / serves equivalent mjs files under server/chunks etc
So I assume that "prerendering" in the build case is not physical html files but mjs files which Nitro / Vue can more efficiently present as HTML?
Thanks10 Replies
from what i understand:
generate -> make static html/css/js so your site works without any serverside rendering
build -> build your nuxt application for production so you can run it in SSR
I guess I'm wondering if I can do
generate and get API endpoints, or if not, what are the most performant settings to choose for an SSR siteno, generate only makes clientsided code, not serversided code
on how to make performant SSR, there are a bunch of articles, for example this article talks about it: https://www.vuemastery.com/blog/nuxt-3-performance-pt-1/
Vue Mastery
Nuxt 3 Performance Pt 1 | Vue Mastery
In this article, we’ll be looking at Performance in Nuxt 3 applications and how we can boost the performance of our apps.
Thanks for the link, but the topics it covers are more for client side performance, hydration, etc.
My Lighthouse performance is already 94; I just want more info on the mechanics of SSR, routeRules, etc. and how it all works together which I think is a bit light in the docs.
Looks like there's also
{ static: true } in Nitro; what is this? How it is it different from prerender? Or should I use { isr: true } ?
And for example @manniL / TheAlexLichter demos nitro.prerender.routes; I wonder why this vs Nuxt's own routeRules (which I presume are passed to Nitro anyway).
TL;DR I just want more info how all these libs are configured and layered togetherThis article is getting there (it also calls out the docs for lacking info):
https://blog.risingstack.com/nuxt-3-rendering-modes/
RisingStack Engineering
Comparing Nuxt 3 Rendering Modes: SWR, ISR, SSR, SSG, SPA - RisingS...
Learn from our experience in streamlining Nuxt 3 for SEO and speed, navigating scarce documentation and exploring rendering modes.
planning a video on this for a while
I've been digging through the output files, clicking into the import maps, reformatting stuff, extracting compiled JSON; it's really interesting to see how it all fits together.
Interestingly my (currently one) API route had a whole load of unused imports (commented for testing / clarity here).
Just in case they're needed? How come the imports from the original file would not have sufficed?
FWIW I managed to break my Nuxt Content production site by settinging route rules to
{ isr: true }.
Pages load on first navigate, but subsequent navigations to Content pages render your entire content database as the markdown / element node strtucture they're stored in. I don't know enough about ISR to know if this is a bug or expected behaviour, but suspect bug.
Don't do this at home, kids!definitely a bug 😄