How to use Nitro hooks to send a file as a response

[jelmerdemaat]

Hi, my use case is:

• We are using Nuxt and @nuxt/image (ipx provider) to create a lot of response images
• I spotted that these are not saved to disk as a way of caching them
• I want to create a server plugin (if I am correct) that saves theses images to a cache folder after generating them

The logic would be:

1. An image request is caught in the request hook
2. The cache folder is checked to see if this cached image exists
3. If so, respond with the cached image (and do not generate new ones)
4. If not, proceed with the request as usual
5. After image requests, check the cache folder to see if this cached image exists
6. If so, do nothing
7. If not, save the image response on disk in the cache folder for later use

Below is what I have now. This kinda works, but keep getting this error when developing: [nuxt] [request error] [unhandled] [500] Cannot set headers after they are sent to the client. At every image request. It feels like my response is working, but the original response is also still sent.

I feel like I'm missing something. How can I use Nitro hooks correctly to answer with a new Response with an image file?

import { writeFile, mkdir, readFile } from 'fs/promises';
import { existsSync, readFileSync } from 'fs';

const cacheFolder = 'node_modules/.cache/nitro/images';

const getCacheKey = (path: string) => {
	return cacheFolder + path;
};

export default defineNitroPlugin(async (nitroApp) => {
	await mkdir(cacheFolder, { recursive: true });

	nitroApp.hooks.hook('request', async (event) => {
		const { path } = event;

		if (!path.startsWith('/_ipx/')) return;

		const targetCacheFilePath = getCacheKey(path);

		const exists = existsSync(targetCacheFilePath);

		if (exists) {
			const file = await readFile(targetCacheFilePath);

			const res = new Response(file);

			await event.respondWith(res);

			console.log('Image served from cache:', targetCacheFilePath);

			return;
		}
		
		console.log('Image NOT served from cache');
	});

	nitroApp.hooks.hook('afterResponse', async (event, response) => {
		const { path } = event;

		if (!path.startsWith('/_ipx/') || !response) return;

		if (Buffer.isBuffer(response.body)) {
			const targetCacheFilePath = getCacheKey(path);

			if (existsSync(targetCacheFilePath)) return;

			const targetCacheFolderPath = cacheFolder + path.split('/').slice(0, -1).join('/');

			await mkdir(targetCacheFolderPath, { recursive: true });

			writeFile(targetCacheFilePath, response.body).then(() => {
				console.log('Image cached:', targetCacheFilePath);
			});
		}
	});
});