How To Fix the Next JS Large Page Data Error

If you are working with Next JS, you likely know that you can render a page via server side rendering (SSR) using getServerSideProps or you can perform a static render of the page using getStaticProps.

Next JS's docs explains these options here.

Serverside rendering is great for SEO, and can lead to fast rendering times. However, lately I have been working on an application that requires a lot of data on the initial load. Overtime, the initial load of the website has been getting slower.

This time to first byte is important because the user is watching their browser struggling to find something to render. They aren't even seeing a spinner because the web app isn't rendered at all.

Eventually, Next JS issued me a warning that said "Large Page Data" and recommended that I fix this for performance reasons.

Because I didn't need SEO indexing on this particular web app, I switched from getServerSideProps to getStaticProps, which allowed the user to view a loader and indicate that they are visiting the web app and the initial data is loading.

The other way I improved my performance was I refactored my getStaticProps request to only request the data absolutely necessary for the user to first interact with the page. Then, I used Next'sclient side data fetching to get multiple requests in the useEffect hook for data that can come in a second or so later if needed.

This method increased the time to first byte from about 5 seconds to seeming almost instant.

My advice is to typically to use client side data fetching. Next JS also recommends this in their docs here. Keep your requests small and show a spinner only when really necessary.