next js use getStaticProps and serverSideProps

Question

I use Next js for store site and my site has multi language capability. My question is how to use getStaticProps, getServerSideProps on a page with static and dynamic data?

_app.js

import {appWithTranslation} from "next-i18next";
    const MyApp = ({Component, pageProps}) => {
    const {locale} = useRouter();
    return (
        <div dir={locale === "en" ? "ltr" : "rtl"}>
            <Component {...pageProps} />
        </div>
    );
};
export default appWithTranslation(MyApp);

products page:

import {useTranslation} from "next-i18next";
import {serverSideTranslations} from "next-i18next/serverSideTranslations";

import {axios} from "config/apiConfig";

const Products = ({data}) => {
    const {t} = useTranslation("common");
    return (
        <div>
            <h1 className="text-center">{t("title")}</h1>
            {
                data.map(item => {
                    return <ListItems key={item.id} {...item} />
                })
            }
        </div>
    );
};
export async function getServerSideProps() {  
    const data = await axios({method: "GET", url: "http://localhost:3000/products"});
    return {
        props: {
            data: data.data
        }
    };
};
export async function getStaticProps({locale}) {  
    return {
        props: {
            ...await serverSideTranslations(locale, ["common"])
        }
    };
};
export default Products;