Next.js Discord

Discord Forum

`export revalidate` and `fetch revalidate` doesnt work

Answered
Cape May Warbler posted this in #help-forum
Open in Discord
Cape May WarblerOP
I got simple async page where I have few imports along with export const revalidate = 60 and inside my page I await data with fetch that has { next: {revalidate: 60 }}. Still my page builds as static and my changes doesn't update. I might have missed something but as I read documentation it seemed like this should do the trick. I'm not sure if that plays a role but my fetch function is defined outside of page in libs directory.

async function getStrapiData<T>(url: string, title: string, { locale, params }: apiOptions = {}): Promise<T> {
    locale = locale || 'pl'
    const urlParams = new URLSearchParams(params).toString();
    const finalUrl = `${getStrapiAPIurl(url)}?locale=${locale}${urlParams ? `&${urlParams}` : ''}`
    console.log(finalUrl)
    const res = await fetch(finalUrl, {
        // next: {
        //     revalidate: Number(process.env.NEXT_REVALIDATE) || 3600
        // }
    })
    if (!res.ok) {
        throw new Error(`Failed to fetch ${title} data`)
    }
    const data = await res.json()
    if (Array.isArray(data.data)) {
        return data.data.map(({ attributes }: { attributes: T }) => attributes)
    }
    return data.data.attributes
}

const getStrapiDataCached = cache(getStrapiData)

const populate = { populate: '*' }

export class Getter {
    static locale: string = 'pl';
    // static getterFactory = <T>(url: string, title: string, params?: Record<string, string>) => (locale: string = Getter.locale) => getStrapiDataCached<T>(url, title, { locale, params: params || {} })
    static getterFactory = <T>(url: string, title: string, params?: Record<string, string>) => (locale: string = Getter.locale) => getStrapiData<T>(url, title, { locale, params: params || {} })
}

export const getGallery = Getter.getterFactory<Gallery>(collection.gallery, 'Gallery', populate);
Answered by Cape May Warbler
Solution for now was to add export const dynamic = "force-dynamic" but I wonder why I was getting this error and if I understood docs correctly (first question)
View full answer

4 Replies

Cape May WarblerOP
import { Container } from '@/components/layout';

import Image from 'next/image';


import { getGallery } from '@/lib/strapi/getters';
import { getImageUrl, imagePresent } from '@/lib/strapi/helpers';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTrigger } from '@/components/ui/dialog';
// import { unstable_setRequestLocale } from 'next-intl/server';
import { LazyImage } from '@/components/shared/LazyImage';
// import { cookies } from 'next/headers';


export const revalidate = process.env.NEXT_REVALIDATE

// export default async function Page({ params: { locale } }: { params: { locale: string }}) {
export default async function Page({ params: { locale } }: { params: { locale: string }}) {
    // cookies();
    // unstable_setRequestLocale(locale);
    const photos = await getGallery();
    return (
        <main className="min-h-screen ">
            <Container className='py-16'>
                <div className="grid grid-cols-2 space-x-4">
                    <div className="flex flex-col space-y-4">
                        {photos.map(
                            (photo, i) => {
                                if ((i % 2) && imagePresent(photo.image)) {
                                    return (
                                        <PhotoContainer photo={getImageUrl(photo.image)} key={getImageUrl(photo.image)} />
                                    )
                                }
                            }
                        )
                        }
                    </div>
                    
                </div>
            </Container>
        </main>
    )
}
I had to delete bit of code from the end to paste my page here, besides what I described above I'm getting following error for this page:
[Error]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
Cape May WarblerOP
Solution for now was to add export const dynamic = "force-dynamic" but I wonder why I was getting this error and if I understood docs correctly (first question)
Answer
Cape May WarblerOP
And if I add force-dynamic to page it will be rendered each time on request or will revalidate every minute like I set it to