Chi Thanh DangThis Website is Stupid Fast: How to Make Your App Blazingly Fast
What I'm about to share with you is the coolest open-source repository that I have seen this year. It's not only the fastest website I have ever seen on its own but it's also built in Next.js. I don't use the term "coolest open-source project of the Year" lightly, and in this case, I really mean it.
The website we're going to explore is called Next Faster, an open-source project made by Ethan Niser, Ry Sullivan, and Arman's code. This project is a highly performed e-commerce template using Next.js, arguably even faster than a car part website that inspired it.
As we navigate around the website, two things happen: the navigation is absolutely instant, and the images are instantly there. The way they achieve this is really clever.
So, how does it work? There are five key points to how this website is so fast. First, there's extremely aggressive prefetching, where the data and images are preloaded on hover. This means that when you click on an entry, the data is already there, making the navigation feel instant.
Second, there's extremely aggressive caching using React Query and a query function to get the data that we have on that page. This ties into the third point, which is aggressive caching served from a Upstash Redis cache globally distributed and fast anywhere.
The fourth point is the use of a query key to identify the data in the cache using React Query. Finally, the fifth point is the use of a query function to get the data that we have on that page, which essentially is just data coming from Upstash Redis.
I really hope you enjoyed this video and take this for your next project. Go ahead, I encourage you to dig through the repository and learn for yourself. That's one of the best approaches to learning - just going through a repo and seeing the code for yourself, experimenting with it. If you find anything where you say "Hey Josh, why didn't you talk about that?", let me know in the comments down below.
