After install next-pwa my page get previous props

[foxter111]

Hello everyone. I have a problem with my page props. Sometimes, my page get previous props, although I see, that getServerSideProps passes correct values.

I have a page that render different content depending on the type of user. I get type of user in getUserTypeServer and pass it to the page.

My code for example:

 const Page = props => {
    if (props.userType === 'admin') {
        return <AdminPage />;
    }
    return <UserPage />;
};

export async function getServerSideProps(ctx) {
    const { req } = ctx;
    const headers = headersForServer(req);
    let userType = null;

    if (headers['x-auth-token']) userType = await getUserTypeServer(headers);

    return {
        props: {
            userType,
        },
    };
}

export default Page;

How To Reproduce

1) Log in for user 2) Go to the page 3) Logging out 4) Log in for admin 5) Go to the page

I think, that this bug appear after install next-pwa for my app. My page gets previous props and renders a component for ordinary user, although getUserTypeServer passes a correct type.After reload page, it gets correct props and renders a component for admin. I think, it can be caching, but I don't know, how I can fix it. Does somebody help me? .

My next.config:

const moduleExports = withPWA({
    pwa: {
        dest: 'public',
        register: true,
        skipWaiting: true,
        disable: process.env.NODE_ENV === 'development',
    },
    compiler: {
        styledComponents: true,
    },
    swcMinify: true,
    async redirects() {
        return [
            {
                source: '/',
                destination: '/login',
                permanent: false,
            },
        ];
    },
    webpack: config => {
        config.resolve.alias['@'] = path.resolve(__dirname, 'src');
        return config;
    },
});

module.exports = moduleExports;

Version libraries: "next": "12.2.2", "next-pwa": "5.5.4",

[bruceharrison1984]

I've noticed the exact same thing. My homepage has dynamic elements, and deleting an element removes it from the list(and DB), but if I close and reopen the app, the original list still appears. Refreshing the page brings in the new, correct list.

I presume this may be related to some type of caching within next-pwa, but I haven't nailed it down.

[bruceharrison1984]

Digging around in old issues, I found this thread.

Basically, next-pwa will check the cache first for getServerSideProps values. Changing next-data it to NetworkFirst instead of StaleWhileRevalidate overrides this behavior.

[foxter111]

@bruceharrison1984 Yes, you are right. I changed next-data and it works for me. Thank you.