reactjs 在NextJS中,如何避免在每个页面上重复getStaticProps函数?

qni6mghb  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(141)

我是React/NextJS的新手,所以我对它的要求/导入文件等功能很熟悉。
我正在使用SSG的getStaticProps,从Prismic CMS中提取数据。
如NextJS文档中所述:
getStaticProps只能从页导出。不能从非页文件、_app、_document或_error导出。此限制的原因之一是React需要具有所有必需数据才能呈现页。
在实践中,这意味着我在网站的许多页面和模板中重复使用相同的功能,这与DRY原则背道而驰。
有没有什么方法可以让我在一个文件中写一次,然后在多个页面上使用它,而不会破坏NextJS/SSG的功能?
我试过以下几种变化,但都无济于事:

// testfunc.tsx
const TestFunc = () => {
    return (

        async function getStaticProps() {        
            const client = createClient()
    
            const [menu, page] = await Promise.all([
                client.getSingle( 'menu' ),
                client.getSingle( 'page' ),
            ])
    
            return {
                props: {
                    menu,
                    page,
                },
            }        
        }    
    )
}
export default TestFunc;

// page.tsx
import TestFunc from './TestFunc'
oiopk7p5

oiopk7p51#

实际上,在Next.Js中有两种类型的渲染Static Site Generation (SSG)Server Side Rendering (SSR)。你可以在谷歌上搜索详细的差异,但简而言之,当您使用SSG时,这意味着您已经知道哪些数据将用于生成HTML页面,并且您还需要实现getStaticPaths函数,这不是“t新的开发人员,因为我们一直在使用这个静态页面从很长一段时间。
因此,回答您的第一个问题,如果您遵循SSG,则需要在每个页面上重复此代码,因此在构建WebApp Next.JS时,将在内部调用这些函数以获取数据,并在构建时生成HTML页面,因此当您尝试在浏览器中访问其中任何页面时,它将显示构建时生成的页面,即使你的后端数据被改变了,它也不会反映在这些页面上,所以如果你需要更新数据,那么你必须重新构建应用程序。另外,如果你进入网络选项卡,你可以看到整个HTML页面作为响应。
如果你确定你的数据对于所有页面都是静态的,那么你可以只在一个帮助文件中编写这些函数,然后在你需要的地方导出和导入(这不是一个现实的场景,但我认为出于学习的目的是可以的)。
我希望这回答了你的问题,快乐编码!

相关问题