有没有办法在初始加载期间填充 MobX 存储？

Question

我正在构建一个简单的 Next.js 网站，其中有许多组件嵌套了很多层，尽管它们实际上都使用相同的数据（文章名称、项目名称、常见问题解答卡数据和类似的东西）。

我不想在多个方向上传递与 props 相同的数据。我也不想在每个页面上使用

getStaticProps

every 来获取相同的数据。相反，我想填充我的 MobX 存储一次，以便以后所有组件都可以引用它，如

store.articles

，

store.projects

我的问题是：有没有办法在初始加载期间将整个应用程序的数据放入 MobX 存储中，并完全省略 props 和

getStaticProps

？

Answer 1

如果我们只谈论

/pages

（Next.js 13+也有更新的

/app

方法，但目前不推荐用于生产，它可能不稳定），那么获取东西的唯一方法对于所有路线，一次是在您的自定义

getInitialProps

组件中使用

_app

。主要的警告是它禁用了Automatic Static Optimization，因此您的页面将不再像使用

getStaticProps

一样静态生成。

getStaticProps

在

_app

中不可用。

如果你想保留静态生成那么你必须使用

getStaticProps

。我的建议是创建一些你可以在页面之间重复使用的通用方法，然后你只需要从页面重新导出它，就像这样：

import { getCommonStaticProps } from '/some-file'

export const getStaticProps = getCommonStaticProps;

好消息是，我认为你只能在

_app

中初始化你的商店一次，因为你也可以从

getStaticProps

那里获得道具：

const CustomApp = ({ Component, pageProps }: AppProps): JSX.Element => {
  // You probably want to create it here in a similar way
  const store = useState(() => new Store(pageProps))

  // And then use your store provider like you probably already do 
  return (
    <StoreProvider value={store}>
      ...
    </StoreProvider>
  )
}