getServerSideProps causes router push delay a few seconds

I use next-i18next and use getStaticProps from official document.

It’s working fine if route like this:

folder

pages/markets/index.tsx

code

import Markets from '@/components/Markets';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

function markets() {
    return (
        <>
            <Markets />
        </>
    );
}

export async function getStaticProps({ locale }: { locale: string }) {
    console.log('getStaticProps from Markets');
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common'])),
            // Will be passed to the page component as props
        },
    };
}

export default markets;

Now I have another route like this:

pages/marketsDetail/[marketSlug]/index.tsx

getStaticProps will show error Error: getStaticPaths is required for dynamic SSG pages and is missing for '/marketsDetail/[marketSlug]'. so I change to use getServerSideProps.

It’s working for i18, but when I deploy to vercel and use router.push(/marketsDetail/marketSlug), it will stuck for a few seconds in first use router push to marketsDetail

code:

import MraketsDetail from '@/components/MraketsDetail';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

function marketsDetail() {
    return (
        <>
            <MraketsDetail />
        </>
    );
}
// It will cause delay when user first router push to marketsDetail
export async function getServerSideProps({ locale }: { locale: string }) {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common'])),
        },
    };
}

export default marketsDetail;

If I give up to use getServerSideProps, I can use i18n in my dynamic marketsDetail page.

How to solve the router push delay issue when I use getServerSideProps ?