4

I'm building a Next.js app with React, Redux and Firebase.

My app's state is kind of split between two kinds. One is global (and should go into the Redux store), and the other is local for each specific page.

I'll be pre-rendering the pages (they need data), therefore I'm adding a getStaticProps function to each page. But for any page to render properly it also needs the "global" state.

It would be ultra repetitive to build and add the global state in every page getStaticProps function. I'd like to do it in a single place and make sure that Next.js will add that global state to every page render.

https://nextjs.org/docs/advanced-features/custom-app

enter image description here

From the link above, it seems that the place to do it is in the custom _app.tsx file:

This is the example code:

// import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

From the comment above, it seems that if I use getInitialProps on the _app.tsx it will disable the ability to perform automatic static optimization, causing every page in your app to be server-side rendered.

And I don't want my app to be entirely server-side rendered. I want it to use static side generation with the revalidate option (Incremental Static Regeneration).

What is the proper way of doing that?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • 1
    I fear that at the moment the only proper way is to use `getStaticProps ` on each page see [here](https://github.com/vercel/next.js/discussions/10949), but it can depends on *when* you need this global state, you can wrap your components inside `_app.js` into another component and share context – Nico Apr 15 '21 at 15:46
  • @Nico thank you for pointing that out. I've visited that issue before, but just now I saw that comment: _This is just an initial restriction as we want to make sure we provide the right abstraction for it in _app. (...) The restriction will be lifted at a later point._. I can do it on each page. It will be cumbersome, though. – cbdeveloper Apr 15 '21 at 15:50

0 Answers0