nuxt
Support for `ssr: false`
I am trying to use nuxt-img with electron, but the problem is that electron does not working with ssr, and it seems that this module does not work without server-side rendering (ssr: true).
Is there planned support for ssr: false. Before, in version v0 there seemed to be a static provider (docs), does something like this exist in this version? Where maybe some of the nuxt-img features are dropped, but the images still work with the ssr: false property?
Context, when running with ssr: false ipx does not run, meaning the _ipx folder does not exist, see this issue.
--
The documentation is also rather confusing, from static images
In that case, you can tell Nuxt to pre-render images by using the nitro.prerender.routes option
What does this mean, do I have to loop through all my images, and create an array with a prefix of /_ipx/w_???.
ssr: false means no HTML rendering of your Vue pages and this is not compatible with prerendering a totally static website with image optimisation. nuxt would be unable to know what images to optimise.
(it would work fine if you had a server at runtime)
however, you can statically generate a site without ssr: false. this should work fine. normally using ssr: false when prerendering is a mistake or misunderstanding of how nuxt does ssg.
Could generate the optimized images during generation, and then serve them statically? Or perhaps at least make it so the images do load, but there isn't any processing by nuxt-img so the site doesn't break?
that’s exactly what ipxStatic does. but it requires you to have ssr: true turned on during static generation.
to reiterate, ssr: true does not mean you have a server at runtime
Isn't the whole point of SSR that you have a server at runtime that helps with page rendering? I'm getting that impression from this universal rendering in the wiki
Cost: A server needs to be running in order to render pages on the fly. This adds a monthly cost like any traditional server. However, the server calls are highly reduced thanks to universal rendering with the browser taking over on client-side navigation. A cost reduction is possible by leveraging edge-side-rendering.
I'm not sure I understand the point you are making.
You can statically render all your pages without any server at runtime. You need ssr: true to benefit from most of the benefits of this, like SEO or image optimisation. Only very rarely would it ever be correct to use ssr: false with a fully static site. (Possibly in the case of an electron app, like your situation.)
You can also have a server running at runtime. Mostly I would also recommend ssr: true but in the edge case of opting for ssr: false the main benefit you would get is having API routes, like /_ipx.
My apologies I'm a bit confused. What is the point of ssr: true, if you don't need to have a server running at runtime? What exactly does it do?
ssr: false means no HTML rendering of your Vue pages and this is not compatible with prerendering a totally static website with image optimisation. nuxt would be unable to know what images to optimise.
Could we not optimize the images, just serve them, so the website doesn't break? Maybe let the users know with a warning that the images aren't being optimized?
I have more or less the same problem on a customer project. The live website is generated statically which is totally fine, but the customer wants to see a preview of the changes he made in the CMS so I came up with the idea to simply have a site with ssr:false.
For me it's no issue that the images can't be optimized - for me the issue is that the files are still linked as they would have been optimized.
So in my example I have the live site (https://lsg-langenberg.de) and the preview site (http://preview.lsg-langenberg.de) and they produce the same html output for the image tag and sources. It would be better if the url would be the url on the cms server so it could be loaded from there, sure not optimized, but better then seeing no images at all :D
A solution could be an additional flag to disable optimization entirely
For the moment I will use a workaround to disable the module in the preview site entirely, to don't rewrite alot of code I simply created a component for NuxtImg.vue
<template>
<img :src="props.src.replace('/directus/','https://directus.lsg-langenberg.de/')" :alt="props.alt">
</template>
<script setup>
const props = defineProps({
src: String,
alt: String
})
</script>
I believe this issue is similar to what I'm currently facing:
I initially built a static website using Nuxt SSR with Nuxt Image, but later switched to Nuxt SSG mode to improve Lighthouse scores. However, some of my images are rendered via IntersectionObserver alongside the DOM, which causes them to break during nuxt generate. More specifically, the issue seems to be incorrect image paths as previously mentioned.
As a result, I was forced to refactor the entire site to use vite-imagetools instead of Nuxt Image — a significant amount of work. Do I really need to manually list the paths of over 300 images in nitro.prerender.routes to make this work?
We have the same problem on a customer project, we adopted Nuxt Image to improve the performance of our web app (SSR: true) but found that it broke the images in our mobile apps (SSR: false).
I would support a feature to ensure the images still render without optimization for electron (were using Ionic) rather than showing broken images.
The mobile apps are running in static generation mode (SSG) where SSR is set to false. In this mode, dynamic image transformations that NuxtImg provides won't work because:
- The site is pre-generated at build time
- No runtime image processing is available
- The /_ipx/ endpoint that NuxtImg uses for transformations isn't available in the static build
We are not considering making a custom Image component which renders either the NuxtImg/NuxtPicutre or Img tag depending on platform but it's not ideal, it would be much more elegant if Nuxt Image would output the original image rather than serving a broken image for mobile app builds.
