#Caching issue.

1 messages · Page 1 of 1 (latest)

signal badger
#

Why is the component cached? Just when new anime was added to the database after 300 seconds nothing was updated.

aired.tsx:

import { AnimeCard } from '@/components/ui/card/anime.card';
import { Scroll } from '@/components/ui/scroll';
import { Typography } from '@/components/ui/typography';

import { axiosClassic } from '@/api/interceptors';

import { IAnime } from '@/shared/types/anime.types';

export const revalidate = 300;

const title = 'Сейчас на экранах';
const default_length = 30;

interface AiredProps {
    length?: number;
}

export async function Aired({ length = default_length }: AiredProps) {
    if (length < 1 || length > 50) {
        length = default_length;
    }

    const { data } = await axiosClassic.get<IAnime[]>(
        `/anime?aired=true&take=${length}`
    );

    return (
        <div className='indiana-wrapper space-y-1'>
            <Typography
                h4
                as='h3'
            >
                {title}
            </Typography>
            <div className='indiana-list'>
                <Scroll className='indiana-inner overflow-hidden'>
                    {data.map(item => (
                        <AnimeCard
                            key={item.id}
                            data={item}
                        />
                    ))}
                </Scroll>
            </div>
        </div>
    );
}
hidden harborBOT
#

Hi @signal badger. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The component is cached due to the revalidate property set to 300. This property is part of the Incremental Static Regeneration feature in Next.js. When a page has a revalidate property, it will be regenerated at most once every revalidate seconds. In your case, the page will be regenerated at most once every 300 seconds (5 minutes).

However, if a new anime was added to the database and the page was not updated after 300 seconds, it could be due to several reasons:

  1. The server where your Next.js application is running might not have fetched the updated data from the database yet. This could be due to network latency, database read/write delays, etc.

  2. The revalidate property only ensures that the page is regenerated at most once every specified seconds. It does not guarantee that the page will be regenerated exactly after the specified seconds. The actual regeneration might be delayed due to server load, network latency, etc.

  3. If you are running your Next.js application in development mode (npm run dev), the revalidate property might not work as expected. This property is intended for production use.

To debug this issue, you could try the following:

  • Check the network requests in your browser's developer tools to see if the request to fetch the anime data is being made and what data is being returned.
  • Check the logs of your Next.js application and your database to see if there are any errors or delays.

Here are some relevant knowledge sources:

#

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@signal badger kapa.ai is still learning and improving, please let us know how it did by reacting below

signal badger
#

@hidden harbor my page.tsx:

import { Suspense } from 'react';

import { Aired, AiredSkeleton } from '@/components/elements/home/aired';
import {
    Announce,
    AnnounceSkeleton
} from '@/components/elements/home/announce';
import { Film, FilmSkeleton } from '@/components/elements/home/film';
import { Latest, LatestSkeleton } from '@/components/elements/home/latest';
import { Ongoing, OngoingSkeleton } from '@/components/elements/home/ongoing';

export default function Page() {
    return (
        <>
            <div className='mt-2'>
                <Suspense fallback={<AiredSkeleton length={30} />}>
                    <Aired length={30} />
                </Suspense>

                <Suspense fallback={<LatestSkeleton length={30} />}>
                    <Latest length={30} />
                </Suspense>

                <Suspense fallback={<OngoingSkeleton length={30} />}>
                    <Ongoing length={30} />
                </Suspense>

                <Suspense fallback={<AnnounceSkeleton length={30} />}>
                    <Announce length={30} />
                </Suspense>

                <Suspense fallback={<FilmSkeleton length={30} />}>
                    <Film length={30} />
                </Suspense>
            </div>
        </>
    );
}
hidden harborBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Your page.tsx file is using the Suspense component from React to wrap around several other components (Aired, Latest, Ongoing, Announce, Film). The Suspense component allows you to specify a fallback UI to display while the wrapped component is loading. In your case, you're using skeleton components as the fallback UI.

Here's a brief explanation of how it works:

  • When the Page component is rendered, it will attempt to render each of the wrapped components (Aired, Latest, Ongoing, Announce, Film).
  • If any of these components are not ready to be rendered yet (for example, if they are fetching data asynchronously), React will instead render the fallback UI specified in the fallback prop of the Suspense component.
  • Once the wrapped component is ready to be rendered (for example, once it has finished fetching its data), React will replace the fallback UI with the actual component.

This allows you to provide a smoother user experience by showing a placeholder UI while data is being loaded, rather than showing a blank screen or a loading spinner.

Here's an example of how you're using Suspense in your code:

<Suspense fallback={<AiredSkeleton length={30} />}>
    <Aired length={30} />
</Suspense>

In this example, while the Aired component is loading, React will display the AiredSkeleton component. Once the Aired component has finished loading, React will replace the AiredSkeleton component with the Aired component.