How to prerender images with hybrid rendering

[jf908]

I'm using hybrid rendering so some of my pages are prerendered and some are not.

My default route rule has prerender: false which was disabling @nuxt/image from prerendering images until I realised that you need to specify /_ipx/** in routeRules.

export default defineNuxtConfig({
  routeRules: {
    // This makes sure that images are not ignored
    '/_ipx/**': { prerender: true },
    // Your other hybrid rendering rules are expected here
  }
}

Note

This will only prerender images that are included on pages that fall under the { prerender: true } rule in your routeRules.

---

In retrospect this seems extremely obvious but I was confused by several things:

• I was under the assumption that routeRules only applied to pages.
• There are many different options (ssr vs prerender) that can be enabled via different methods (command vs nuxt config vs routeRules) and I thought my problem could have been a poor configuration of different methods.
  • I found docs on SSR topics like this one to be confusing from a hybrid rendering perspective.
• There are several open issues about prerendering with generic titles but it wasn't until I read the issue in its entirety that I realised these issues are about edge cases and that prerendering is fully supported for regular static sites.
• I was dealing with server-side caching issues while debugging this (not Nuxt's fault but added to the confusion😄).

[patrykkurzeja91]

Hey @jf908 , Could You provide some reproduction or repo of this example working? I am struggling with @nuxt/image and ipx provider. I am trying to run nuxt app in ssr/swr mode in which I don't prerender any routes and it seems that even your example isn't generating the /_ipx folder during build.

Only solution for static images that works for me is, unfortunately, the generate option (or { '/**': prerender: true }).

Also, I noticed strange behavior of nuxt build - if You run build locally yarn build && node .output/server/index.mjs and check on localhost - everything works as intended. The same build doesn't work when using docker (my production project is based on docker container so I need it to work there)

[jf908]

I think my use case is slightly different to yours. I am using hybrid rendering for an SPA app that also has some static prerendered pages. I do this by disabling prerendering by default (using { '/**': prerender: false }) but enabling it for specific static pages ({ '/specific-static-page': prerender: true }). When I do this, no images are generated unless I add the '/_ipx/**': { prerender: true } line.

I could be wrong on this one but I think the only way to prerender static images is to also prerender the page they are on so that they can crawled. If you just want to prerender all images, perhaps it would be possible to do it via this method and to iterate through a list of files but I haven't tried using this config before.

I'm not using a node server or docker but that does sound like strange behaviour, I hope you figure it out!

[juliangerhards]

I have the same problem, did you find a solution? I have an ssr app but i need images to be pre rendered on build time.

[patrykkurzeja91]

Unfortunately no. To optimize images with SSR You would have to use some external image provider (cloudinary, storyblok etc)

[timb-103]

Thanks for this, was trying to figure out how to get the images rendered at build time but couldn't see it in the docs.

[supermar1010]

I think this does not work, as it is a dynamic route which needs params to produce anything. I found a kind of working solution here: #795 (comment)

[jf908]

Sorry if my solution wasn't clear. It assumes you have already setup hybrid rendering and that only want to prerender images that are included on prerendered pages. I have updated my post to make this more clear.