How is Your Next Store so fast?

Many of you have asked: "How is Your Next Store so fast?" Now that we've open-sourced the repository let's dig into the techniques we've used to make so fast.

Built on Next.js

Your Next Store is built with Next.js. It’s a modern full-stack JavaScript framework based on React.js, focused on performance. Features like server-side rendering, static rendering, partial pre-rendering, and cache make it simpler than ever to build impressively fast web applications with great user experience.

Stripe as the Backend

The other pillar of Your Next Store is Stripe. Your Next Store uses Stripe as the backend, no database required. This simplifies setup and maintenance as it makes the infrastructure less complex. Stripe APIs handle everything that's needed for e‑commerce: products, variants, categories, taxes, shipping, payments, and so on.

Moreover, Stripe's extensive documentation and helpful support make it easy to customize anything. It's simple, and it makes Your Next Store flexible.

Partial Pre-rendering

One standout technique we use is partial pre-rendering. It allows us to generate static parts of pages during the build time while also allowing for dynamic content.

We vastly improved load times by pre-rendering most of our pages and dynamically rendering only the necessary parts. Thanks to this, users receive the initial page load instantly, even if there is dynamic content involved.

Pre-fetching

We’ve implemented a proactive pre-fetching strategy to minimize delays between clicking on a link and transitioning to a new page. Thanks to pre-fetching the pages, we ensure that pages are rendered and ready as soon as users need them. This gives an outstanding user experience, thanks to very low delays while browsing through Your Next Store. Seamless navigation in e‑commerce is vital to keeping users engaged.

Optimistic Updates

Another interesting technique is optimistic updates. We improved the perceived performance by updating the UI instantly, as soon as the user performs any action, instead of waiting for the server to return a result. A great example is adding products to a cart.

All thanks to the useOptimistic hook brought by React 18+. When everything goes right, users don’t have to wait for server confirmation to see the product in the cart. If a server action fails, the application gracefully handles errors. This builds the impression as if the server responses were instantaneous.

Next.js Data Cache and Full Route Cache

Next.js offers multiple layers of caching, of which two are critical for Your Next Store:

• Data Cache: it stores fetched data and allows for reusing it across different pages without repeated requests. This improves load times, especially for content that doesn’t change frequently, like products.
• Full Route Cache: it stores the entire HTML response for a page. It enables requests to be served directly from the cache and completely bypasses rendering logic and API queries. This results in significantly faster page loads.

Conclusion

Your Next Store is ultra-simple and ultra-fast commerce in Next.js with Stripe as the backend. Techniques like server-side rendering, partial pre-rendering, pre-fetching, and different caching techniques optimize speed and efficiency. Additionally, optimistic updates improve perceived performance and improve UX. These strategies make Your Next Store stand out as fast, user-friendly, and reliable.