如何用 getStaticProps 替换 getInitialProps 以进行 seo 处理以及 props

Question

• 我试图用 getStaticProps() 替换 getInitialPropss()，但我无法做到这一点，我们只能在一个文件中使用 1 个函数
• 此外，通过使用 getStaticProps，SEO 处理和普通道具都应该起作用

index.tsx

const homePage: NextPage = () => {
    return (
        <>
            //jsx code
        </>
    );
};

homePage.getInitialProps = async () => ({
    pageProps: {
        pageName:
            "abc",
        pageDescription: dataPageDescription.home,
        pageClassName: "home",
        mobileHeaderTitle: MobileMenuPageTitleEnum.home
    }
});

// export const getStaticProps = async () => {
//     const pageProps = {
//         pageName:
//             "abc",
//         pageDescription: dataPageDescription.home,
//         pageClassName: "home",
//         mobileHeaderTitle: MobileMenuPageTitleEnum.home
//     };
//     const data = await request(homePage);
//     return { props: { data, pageProps } };
// };

export default homePage;

_app.tsx

function Website({ Component, pageProps }: AppProps) {
    const currentProps = {
        ...pageProps
    };
//rest code

如何用 getStaticProps() 替换 getInitialProps()？

任何建议都会有帮助..

Answer 1

getInitialProps

非常适合您的用例。根据 Next.js 文档

对于初始页面加载，getInitialProps 将仅在服务器上运行。当使用 next/link 组件或使用 next/router 导航到不同的路线时，getInitialProps 也将在客户端上运行。

如果爬虫访问您的页面

getInitialProps

将在服务器上运行，返回SSR页面。这同样适用于通过直接链接（搜索结果、共享链接等）打开网站的访问者。

但是，如果您使用 Next.js 中的Link，它将通过客户端导航到该页面（无需重新加载页面），并且将使用客户端获取数据（将在浏览器中运行，而不是 Next.js 服务器中）