@astrojs/image with SSR doesn't prerender images for prerendered pages

[eostrom]

What version of astro are you using?

2.0.2

Are you using an SSR adapter? If so, which one?

Netlify; also observed on Node

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

With SSR, exporting prerender = true from a page generates the HTML at build time. I think @astrojs/image should also generate image files at build time.

I noticed this with Netlify: when I switched to SSR, my home page hero image disappeared. Looking at the browser console, it was requesting a URL that started with /_image. I opened the URL in a new tab, and found that Netlify was running a function that timed out after 10 seconds.

I'm submitting a Gitpod URL for a repo that demonstrates the issue with the @astrojs/node integration. yarn preview isn't working for me on Gitpod – not sure why, but there are instructions in the README for looking in the dist folder to see what is and isn't there.

Tested with @astrojs/image 0.13.0 and @astrojs/node 5.0.1 (and @astrojs/netlify 2.0.0).

I'm not checking the "willing to submit a PR" box because I don't know where to start, but if someone can point me in the right direction I'm happy to give it a try.

Link to Minimal Reproducible Example

https://www.gitpod.io/#https://github.com/eostrom/astro-image-prerender

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

I know neither this part of image integration or the pre-rendering stuff too well, but I'd assume this part needs to be smarter than just checking if mode is static or not for this to work

[rener084]

Same problem. Using Vercel..

[etmartinkazoo]

Having the same issue

[etmartinkazoo]

Admittedly I haven't dug deeply into @astro/image but would adding an or to the conditional like the following help?

// Helpers for building static images should only be available for SSG
if (_config.output === 'static' || _config.output === 'ssr') {
  globalThis.astroImage.addStaticImage = addStaticImage;
}

[etmartinkazoo]

I found a fix for this that is stated directly in the documentation: use the sharp library. https://docs.astro.build/en/guides/integrations-guide/image/

@natemoo-re perhaps this issue is actually not an issue and people should just use Sharp in place of Squoosh.

[eostrom]

perhaps this issue is actually not an issue and people should just use Sharp in place of Squoosh.

@etmartinkazoo People definitely should use Sharp if it meets their needs! I was using Sharp when I found and reported this issue. Sharp speeds up image optimization, but it doesn't make astro build generate images for prerendered pages. It sounds like you had a different problem, and I'm glad you found a solution to it.

[etmartinkazoo]

@eostrom - You are correct. I need to check this out again with the new image service in 2.1.

[eostrom]

@eostrom - You are correct. I need to check this out again with the new image service in 2.1.

I logged in today specifically to check just that, and this comment was the first notification I got, which felt like a good sign.

As far as I can tell, the new image feature generates an optimized image in the build process, and uses it in the prerendered page. However, it doesn't have @astrojs/image features like generating multiple images at different sizes. Perhaps someday it will.

[Princesseuh]

Hello! We are entering maintenance mode for @astrojs/image in favour of the new astro:assets feature. As noted in the previous comments, the new feature supports prerender correctly.