reactjs - 下一个 js 使用 getStaticProps 和 serverSideProps

Question

我将 Next js 用于商店站点，并且我的站点具有多语言功能。我的问题是如何在包含静态和动态数据的页面上使用 getStaticProps、getServerSideProps？

_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);

产品页面：

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;