Does Using React Context API In NextJS App Disable Static Site Generator?

Question

I've got some questions about nextJS and SSG (static site generator)

1 - I want to manage my app state globally so I want to use react's context api. As I understand using redux in next js app disables SSG. If I use react context api does that disable too?

2 - I know that I can do server side rendering but I want to have a custom nodejs server that I created from scratch. And I want to fetch data from my nodeJS server in the client side. Does making that way disable SSG and bad for performance?

Answer 1

This documentation will help you clarify your understanding on how Next.js handles automatic static optimization. Take a look at the caveats in that documentation to understand when that gets disabled at a global level.

Beyond that, whether or not each individual page behaves as SSG, ISR, SSG + CSR or SSR is a matter of the data requirements of the individual page. See this documentation to better understand the different ways Next.js handles each page depending on the data requirements.

Now, to answer your two questions directly:

1. I cannot find any indication that using Redux in Next.js disables SSG. In fact, here is an official example using Redux to illustrate both an SSG and SSR Next.js page implementation. Same goes for the react context API. On the other hand, it is entirely possible for you to unintentionally disable SSG by both using Redux / react context while requiring dynamic data in your page. Read up on the documentation linked in the second paragraph above to understand this better.

2. Fetching data from your custom NodeJS server client-side does not necessarily disable SSG. It will disable SSG if you require dynamic data on each page load. You have the choice to either statically generate your page (SSG + CSR) and then request your data client-side post page load (think axois / browser fetch API + loading indicator); OR, if you need the data to be present immediately upon page load (SSG & SSR), you can use getStaticProps + getStaticPaths to inject that data at build time (SSG) or getServerSideProps to inject the data on each page load (SSR).