Nuxt 3 architecture rework — performance & SSR
We’re currently restructuring our Nuxt 3 app due to performance issues. Our pages are rendered via a two-step waterfall:
First API call: get route metadata (e.g. pageType, id)
Second API call: fetch actual content based on the above
What we're proposing:
We plan to refactor to SSR fully-rendered pages, and cache them globally via Fastly at the edge. Key improvements:
Eliminate the waterfall with server-side unified data fetching
Use middleware to attach Cache-Control dynamically per page type
Add a webhook to purge/update articles on demand
Maybe Cache articles "forever" unless edited; use stale-while-revalidate for home/category pages
Live examples of our current Nuxt setup:
https://illvid.dk
https://historienet.dk
https://bilmagasinet.dk
https://woman.dk
What we’re wondering:
Are we approaching SSR + edge caching in a Nuxt-idiomatic way?
Would you structure content fetching differently? (Currently planning to centralize route/content resolution into a single server API and preload in serverPrefetch or top-level asyncData)
Any tips for performance wins in similar Nuxt 3 apps?
side note:
we have seen that our search crawlers often see empty <main><!-- --></main> pages during hydration, hurting our SEO, however we can not seem to reproduce this is in any living way, and even our crawls not always see this problem on the same url.
First API call: get route metadata (e.g. pageType, id)
Second API call: fetch actual content based on the above
What we're proposing:We plan to refactor to SSR fully-rendered pages, and cache them globally via Fastly at the edge. Key improvements:
Eliminate the waterfall with server-side unified data fetching
Use middleware to attach Cache-Control dynamically per page type
Add a webhook to purge/update articles on demand
Maybe Cache articles "forever" unless edited; use stale-while-revalidate for home/category pages
Live examples of our current Nuxt setup:
https://illvid.dk
https://historienet.dk
https://bilmagasinet.dk
https://woman.dk
What we’re wondering:Are we approaching SSR + edge caching in a Nuxt-idiomatic way?
Would you structure content fetching differently? (Currently planning to centralize route/content resolution into a single server API and preload in serverPrefetch or top-level asyncData)
Any tips for performance wins in similar Nuxt 3 apps?
side note:
we have seen that our search crawlers often see empty <main><!-- --></main> pages during hydration, hurting our SEO, however we can not seem to reproduce this is in any living way, and even our crawls not always see this problem on the same url.
Illustreret Videnskab er et internationalt populærvidenskabeligt magasin, som giver læseren indsigt i verdens førende forskning i alle grene af videnskaben.
Magasinet HISTORIE tager dig med på en hæsblæsende rejse til fortiden, hvor du kan nyde historiens største dramaer fra forreste række.
"Find de nyeste biltests, anmeldelser og guides til biler fra Bilmagasinet. Hold dig opdateret på alt om biler, nyheder, elbiler, SUV'er og meget mere."
Her får du inspiration indenfor livsstil og underholdning samt indsigt i aktuelle emner, der optager os alle lige nu.
