This project demonstrates the differences between various component rendering strategies in Next.js 16^
- The first method is the slowest, it feels like nothing is happening when you click it.
- The second method is better but the whole page is blocked while the data fetches.This compounds if you use several awaits in sequence. Now you could improve the second method by loading the data in the child components and using suspense and better fallbacks but the navigation to the page would feel slower then a route using PPR.
- The third is the best because you can load the static shell of the page which feels instance, while allowing all dynamic content to be fetch in parallel and data that is not behind auth to can be cached across all deployments allowing the data to be there on page load as a bonus you can start all your data fetching promise on the page and pass them to the children all while keeping the page static and the child components accessing the data dynamic.