X-Nextjs-Cache: HIT in production caching response headers?

Answered

Giant Angora posted this in #help-forum

Giant AngoraOP

2024-06-13T04:30:11.184Z

I have an api endpoint /api/download?icon=UUID to download an image:

import { type NextRequest } from 'next/server';
import { downloadFileFromR2 } from '@/lib/s3';

export async function GET(req: NextRequest) {
    try {
        const fileName = req.nextUrl.searchParams.get('icon')!;
        const image = await downloadFileFromR2(fileName);

        return new Response(image, {
            headers: {
                'Content-Type': 'image/png',
                'Content-Disposition': `attachment; filename="${fileName}.png"`,
            },
        });
    } catch (error) {
        return new Response('Error downloading file');
    }
}

The problem is that this response header of image/png is not being set in production, I always get: text/plain;charset=UTF-8 any ideas?

Also I noticed this header being set by next

Answered by joulev

just for testing, does it work if you add export const revalidate = 0 to the route.ts file?

View full answer

7 Replies

@Giant Angora I have an api endpoint `/api/download?icon=UUID` to download an image: js import { type NextRequest } from 'next/server'; import { downloadFileFromR2 } from '@/lib/s3'; export async function GET(req: NextRequest) { try { const fileName = req.nextUrl.searchParams.get('icon')!; const image = await downloadFileFromR2(fileName); return new Response(image, { headers: { 'Content-Type': 'image/png', 'Content-Disposition': `attachment; filename="${fileName}.png"`, }, }); } catch (error) { return new Response('Error downloading file'); } } The problem is that this response header of `image/png` is not being set in production, I always get: `text/plain;charset=UTF-8` any ideas? Also I noticed this header being set by next

joulev

2024-06-13T04:50:37.613Z

just for testing, does it work if you add export const revalidate = 0 to the route.ts file?

Answer

Giant AngoraOP

2024-06-13T04:58:13.429Z

This is happening only in the live site

I just added the following, but still the same. Going to try the revalidate

import { downloadFileFromR2 } from '@/lib/s3';

export async function GET(request: Request) {
    try {
        const { searchParams } = new URL(request.url);
        const fileName = searchParams.get('icon')!;
        const image = await downloadFileFromR2(fileName);

        return new Response(image, {
            headers: {
                'Content-Type': 'image/png',
                'Content-Disposition': `attachment; filename="${fileName}.png"`,
            },
        });
    } catch (error) {
        return new Response('Error downloading file');
    }
}

https://nextjs.org/docs/app/building-your-application/routing/route-handlers#opting-out-of-caching

According to this it should work

IT WORKS NOW!

export const revalidate = 0

This was the trick

Been struggling for hours, even thought there was a problem with Cloudflare caching, thanks a lot!