The Issue
If you have ever used getServerSideProps in Next.js you must have faced the issue when the page takes almost a few seconds to load or to redirect, that too without any indication of loading on the screen.
While building RealNifty we faced the same issue, It almost takes 7–8 seconds to load the page after clicking on the element
How does Next.js 13 solve it?
Note: If you are using Next.js version ≤ 12, the solution for you is https://www.npmjs.com/package/nextjs-progressbar
Next.js 13 introduced a new file-system based router built on top of React Server Components with support for layouts, nested routing, loading states, error handling, and more.
In your app directory, you can add a loading.tsx file where you can define the content you want to show while the page is being rendered.
For this particular example, we added this code in loading.tsx
This is how it looks at run time,
With this convention, you can show an instant loading state from the server while the content of a route segment loads, the new content is automatically swapped in once rendering is complete.
Resources: https://beta.nextjs.org/docs/routing/loading-ui
Connect with me on Twitter: @pateldeep_eth