All Articles

Should I Use Suspense Or Loading.tsx?

Jack Herrington
Jack Herrington
August 6th, 2023

Q: Should I use Suspense or loading.tsx?

A: You should use both (but not on the same route). We have both mechanisms for a reason. loading.tsx makes it simple to put a spinner across the whole route (or most likely a parallel route) when that entire route is blocked on a single request or set of requests.

Suspense on the other hand allows use to have a more granular approach. If your route has several data sources, some of which are required for rendering, then you can simply block on those. While other components, which can be loaded later via streamed data, can be bracketed in a Suspense.

We have two mechanisms because they suite two different use cases, but both are equally valid.

IMHO, I would start with loading.tsx and then migrate to Suspense if you want the route to render in streaming chunks later on.

Share this article with your friends

Subscribe for Free Tips, Tutorials, and Special Discounts

We're in this together!

We respect your privacy. Unsubscribe at any time.

Jack Herrington

Written by Jack Herrington

Jack Herrington is a Full Stack Principal Engineer who orchestrated the rollout of React/NextJS at Walmart Labs and Nike. He is also the "Blue Collar Coder" on YouTube where he posts weekly videos on advanced use of React and NextJS as well as other frontend technologies trends. His YouTube channel hosts an entire free courses on React and TypeScript. He has written seven books including most recently No-BS TypeScript which is a companion book to the YouTube course.