Loading State for Long Running getServerSideProps


Updated May 22nd, 2023

The Problem

Some heavy data-fetching happening in Next.js application (v12) with a getServerSideProps function on a page-guard-protected route and the UI seems unresponsive or locked up while this resolves.

Client side you can show a loading spinner via some isLoading state but this is not how GSSP works.

Potential Solutions

Convert your data fetching to be run on the client. Keep the authorization logic run on the server but use user-authorized-only api route to fetch the data on the client. Then you can easily show a loading state.

Run some logic in “_App.js” using the router and useState and useEffect but now this 1.) happens for non-gSSP routes as well 2.) clouds the “_app.js” with more code.


Stack overflow here and here