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