How to make Nuxt.js SSR with partially static pre-rendering pages

Question

There are a lot of information either on Nuxt SSR, or going full static, but I can't find any guide how to build a hybrid SSR with static pages together.

I'm building a website with Nuxt SSR, and I want to pre-render all product pages statically from a 10MB JSON file.

I found an archived thread on Reddit, mentioned it's possible to create a middleware with the routes to be statically generated. I don't know how to achieve that, and hope I can get some help.

kissu · Accepted Answer · 2021-09-23 23:29:01Z

1

You will probably need to join the Nuxt Discord but this is how you could achieve it: first note that this is not an official way of doing things and we'll have something better coming out very soon. but if you really need this a workaround is as follows:

set target: 'server' (not static)
run nuxt build to create your ssr bundle
run nuxt generate --no-build (ideally set your routes via generate.routes in your nuxt config)
copy the generated dist folder contents into your static folder (or serve directly from your web server config)
nuxt start

Source: https://discord.com/channels/473401852243869706/473406004751499275/886642260677124166

answered Sep 23, 2021 at 23:29

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

samchuang Over a year ago

Ah, nice... this helps a lot. It's like building 2 separate apps with one code base. When it said "something better coming out very soon", what does that mean? Is it Nuxt 3 will have a proper solution without separate build + generate?

kissu Over a year ago

@samchuang yep, you'll get probably a few new rendering modes!

rudolfbyker Over a year ago

Will this still work for Nuxt 3? I'm facing the same issue. nuxt build seems to ignore the prerender route rules (contra the docs), while nuxt generate gives me ONLY the prerendered routes (as documented).

madc Over a year ago

It's been a year, but maybe someone finds this useful: Nuxt 3 introduced the hybrid render mode: nuxt.com/docs/guide/concepts/rendering#hybrid-rendering

kissu Over a year ago

@madc that answer was for Nuxt2 anyway, Nuxt3 got quite more advanced renderings indeed.

Collectives™ on Stack Overflow

How to make Nuxt.js SSR with partially static pre-rendering pages

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related