Search code examples
requestserver-side-renderingnext.js13

Server component not updated data in Next.js 13v


Component rendered only first fetch, and if data changed, a component not rerendering new data, but in network tab we can see response with new data.

cache: 'no-store' // not work for me

My request function

export const getData = async (
    params: IRequest,
): Promise<IResponse> => {
    const searchParams = createSearchParams(params);
    const url = `${environment.BASE_URL}/data?${searchParams}`;

    const response = await fetch(url, {
        method: 'GET',
        headers: headers,
        cache: 'no-store',
    });

    if (!response.ok) {
        throw new Error('Failed to fetch');
    }

    const responseData = await response.json();

    return responseData;
};

My Component

const Footer = async () => {
    // Get data
    const data = await getData({});
    
    return ()

Solution

  • In my case, there was a problem that made requests in the component (Footer) and not on the page. And it helped.

    To check, open the tab with the network, and if you see requests, this will tell you what to do on the client side. Therefore, make requests on the Page.

    And also very important. Use this in your file

    export const runtime = 'edge';