在Next.js中是否有全局位置可以获取菜单项(服务器端),并将其传递给我的Layout组件。因为,我不能这样做,在index.js,如果有人直接打开不同的路线,例如:/about,那么将不提取数据。我试着在_app中实现它的静态getInitialProps方法,但我不确定这是否是一个好的做法,而且它会在没有静态生成的页面中禁用自动静态优化。有什么建议吗?
index.js
/about
_app
getInitialProps
von4xj4u1#
getInitialProps是您正在做的事情的旧方法。但是getServerSideProps和getStaticProps将取代getInitialProps
getServerSideProps
getStaticProps
https://nextjs.org/docs/api-reference/data-fetching/getInitialProps但是getServerSideProps暂时还不能用in_app来进行全局取数,稍后会介绍,在此之前,我想您有以下几种选择:1.继续使用getInitialProps和交易静态优化1.获取客户端上的菜单项并呈现活动指示器(微调器?),直到数据准备就绪。1.添加一个getServerSideProps Package 器和一个类似withMenuItem的HoC,并 Package 所有页面及其getServerSideProps导出。
withMenuItem
velaa5lx2#
getServerSideProps HoC的示例
const withGlobalData = (getStaticProps) => async (...props) => { const result = await getStaticProps(...props) const staticProps = result?.props || {} const global = { menuItems: ['home', 'about'] } // your global props return {...result, props: { ...staticProps, global }} }
使用此函数作为getStaticProps函数的 Package 器,如下所示。
export const getStaticProps = withGlobalData( async ({ context }) => { return { props: { // page specific props } } } )
2条答案
按热度按时间von4xj4u1#
getInitialProps
是您正在做的事情的旧方法。但是getServerSideProps
和getStaticProps
将取代getInitialProps
https://nextjs.org/docs/api-reference/data-fetching/getInitialProps
但是
getServerSideProps
暂时还不能用in_app来进行全局取数,稍后会介绍,在此之前,我想您有以下几种选择:1.继续使用
getInitialProps
和交易静态优化1.获取客户端上的菜单项并呈现活动指示器(微调器?),直到数据准备就绪。
1.添加一个
getServerSideProps
Package 器和一个类似withMenuItem
的HoC,并 Package 所有页面及其getServerSideProps
导出。velaa5lx2#
getServerSideProps HoC的示例
使用此函数作为getStaticProps函数的 Package 器,如下所示。