Weird auto revalidate for RSC | Next.js | Page 1

chrome torrent Feb 11, 2024, 9:19 PM

#

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

cyan palmBOT Feb 11, 2024, 9:19 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

chrome torrent Feb 11, 2024, 9:19 PM

#

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>
        </>
    )
}

#Weird auto revalidate for RSC