High speed sites with Prismic and NextJS

Profile picture for user Dan
Dan

In this post, I'll share my experience building a sales and marketing site that needed to handle high traffic spikes using Next.js and Prismic.

Choosing the Right Stack

Next.js is a powerful React framework that excels in performance. Its server-side rendering (SSR) and static site generation (SSG) capabilities ensure fast load times, making it ideal for handling traffic surges. 
https://nextjs.org/

Prismic serves as our headless CMS, allowing us to manage content with flexibility. Its slice-based approach lets us create modular components, giving us control over the design without constant developer involvement. 
https://prismic.io/

Taiwind CSS: to get things built quickly, with a site so small and temporary we wanted to avoid the overhead of creating our own design system. 

Key Performance Strategies

  1. Static Site Generation (SSG): We pre-render critical pages, reducing server load and speeding up response times during traffic spikes.
  2. Image Optimisation: Prismic has a powerful image CDN and react component for generating and rendering the correct image sizes.
  3. CDN Integration: We leveraged a CDN to cache content globally, minimising latency for users everywhere.

Costs

The only two hosting costs were for Prismic and for Netlify with a combined total of £30 a month although the Netlify costs is harder to estimate as we run multiple sites in the same account so I suspect it was like £20 per month 

Developing with Slices

Prismic's slices allowed me to build dynamic layouts efficiently. I could easily create and rearrange content blocks, enabling rapid iteration based on marketing needs. In Prismic it is also possible to create variants of the same slice, the content developer can see how this all looks in the UI using the simulate option in the development kit.

Prismic slice variant image

Conclusion

By combining Next.js and Prismic, we built a high-performance site that can adapt to varying traffic demands while maintaining a cohesive design. This approach not only enhanced user experience but also empowered our marketing team to stay agile.

Our lighthouse scores at launch were 100% across the board and the page load was sub 1/2 a second. (The SXSW site has changed since this article was written.)