Weird auto revalidate for RSC

Unanswered

American Crocodile posted this in #help-forum

American CrocodileOP

2024-02-11T21:19:03.000Z

For some reason, the RSC pages revalidate after a certain amount of time. All my pages should be fully static; there are no dynamic parameters, async components, or whatever. They should all be static using getStaticProps for localization purposes. But for some reason, all these pages revalidate or drop cache (I don't know what exactly is happening), and they render the component again (for full static pages). It could be fine, but in production, it takes up to 4 seconds in some cases, which is unacceptable. I'm using Next.js 14.1 with the app router and next-intl package. I tried using foce-static and revalidation time but it didnt work

3 Replies

American CrocodileOP

2024-02-11T21:19:41.000Z

support page example

import CreateTicket from '@/components/Support/CreateTicket/CreateTicket'

import dynamic from 'next/dynamic'

const SupportContainer = dynamic(() => import('@/components/Support/SupportContainer'), {
    ssr: false,
    loading: () => <TicketsSkeleton />,
})

import PageHeader from '@/components/Layout/PageHeader/PageHeader'
import { useTranslations } from 'next-intl'

import TicketsSkeleton from '@/components/Support/Skeletons/TicketsSkeleton'

import WorkingHours from '@/system/ui/templates/working-hours'
import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'
import { Suspense } from 'react'
import TelegramBanner from '@/components/Support/TelegramBanner'

export async function generateMetadata({ params }: { params: { locale: string } }) {
    const t = await getTranslations({ locale: params.locale, namespace: 'layout' })

    return {
        title: t('support'),
        alternates: {
            canonical: `${params.locale}/support`,
        },
    }
}

export default function SupportPage({ params }: { params: { locale: string } }) {
    unstable_setRequestLocale(params.locale)

    const tLayout = useTranslations('layout')

    return (
        <div className="flex w-full flex-col">
            <PageHeader
                text={tLayout('support')}
                breadcrumb={[tLayout('support')]}
                rightComponent={<CreateTicket />}
            />
            <div className="flex flex-col w-full gap-y-4">
                <WorkingHours />
                <TelegramBanner />

                <Suspense>
                    <SupportContainer />
                </Suspense>
            </div>
        </div>
    )
}

promo page example

import PageHeader from '@/components/Layout/PageHeader/PageHeader'
import PromoStories from '@/components/Promo/PromoStories/PromoStories'
import PromoItemsSkeleton from '@/components/Promo/Skeletons/PromoItemsSkeleton'

import { useTranslations } from 'next-intl'
import { unstable_setRequestLocale } from 'next-intl/server'

import dynamic from 'next/dynamic'

const PromoContainer = dynamic(() => import('@/components/Promo/PromoContainer'), {
    ssr: false,
    loading: () => <PromoItemsSkeleton />,
})

export default function PromoPage({ params }: { params: { locale: string } }) {
    unstable_setRequestLocale(params.locale)

    const tLayout = useTranslations('layout')

    return (
        <>
            <div className="flex w-full flex-col">
                <PageHeader text={tLayout('promo')} breadcrumb={[tLayout('promo')]} />
                <PromoStories />
                <PromoContainer />
            </div>
        </>
    )
}

There is no async components in entire app. Almost all job moved to client components, but every page still re-renders for some reason after ~1 minute of doing nothing