Next.js, BigCommerce & the Future of Performance in Ecommerce (Katie Hoesley & Matt Volk)

hello um wow there's so many of you here um I'm really excited to be here today to talk about how big Commerce is building the future of Performing e-commerce with nextjs my name is Katie and I'm a senior developer Advocate at Big Commerce and if you're not familiar with big Commerce we're a SAS e-commerce platform and we're the engine that powers tens of thousands of e-commerce storefronts including some of your favorite Brands so why is Big Commerce here at nexcom um good question so first and foremost we know that great developer experience drives the best Shopper and brand experiences possible over the past few years as we've catered more and more to larger enterprise-sized Brands we've learned a lot about their needs for composable scalable options for e-commerce storefronts in response to those needs we were the first SAS e-commerce platform to jump on to nextjs Commerce four years ago um and in case you didn't know nextjs Commerce is a nextjs 13 plus an app router ready headless storefront temp template that helps developers quickly spin up e-commerce storefronts in minutes with big Commerce for sale and nextjs we've been using nextjs to build and provide headless doorfront capabilities for our retailers who weren't finding the right Solutions anywhere else so Our Brands love nextjs so this is just one example this is level 9ine and this storefront was built by mea Commerce which is a big Commerce agency that builds dozens of big Commerce storefronts um and their story level 9es is similar to that of many other retailers that we've had migrate to nextjs um they saw a revenue increase of over 200% a conversion rate increase of over 75% and this isn't on the slide but their bounce rate was reduced by 45% um and this is just one example and a pretty uh good one uh but this example does illustrate what we've seen to be true across many many many storefronts and that's that using nextjs and nextjs commerce equals really big wins for Brands and developers alike so so as a developer Advocate and if any of you are DOs here you'll you'll relate to this I spend a lot of my time talking to developers about their problems about building storefronts about apps and Integrations for our platform um and what we've built with nextjs and nextjs commerce is a really great jumping off point for those developers who are building headless e-commerce storefronts um working with these developers and dog fooding our own Solutions has allowed us to understand some of the common gaps and limitations that those developers had with our current offering um many of the developers building on big Commerce build storefronts for numerous retailers and they run into the same barriers over and over again so again as a Dev Advocate I view our platform and our developer tools through the lens of the developers who are using them so I'm really stoked to be here today to talk about what we're working on right now to fill in some of those gaps but first let's talk a little bit about the problems that we've identified so the first problem is that everybody wants our site ready faster for any of you who have tried you know that it's really hard to build a well architected headless storefront starting from scratch uh we know that developers want standardized reusable components and a higher jumping off point imagine yourselves in the shoes of the e-commerce agencies we work with who develop tens hundreds thousands of e-commerce storefronts every year the ability to standardize a set of components that they could reuse across builds would save them a ton of time and many brands that they work with have very similar needs so that leaves agency developers to rebuild the same functionality over and over and over without the native capability to reuse those components the second problem is that graphql is hard um it's complicated to integrate a nextjs site with an e-commerce provider like big Commerce um first there is a really steep learning curve when it comes to working with new graphql apis and schemas can be intimidating and it can take a while to learn how to write the right queries lots of developers who build on our platform are interacting with numerous incredibly complex graphql apis on a regular basis and they wish that there was a way to reduce that complexity second is that data fetching using best practices can make or break a site's performance as I'm sure all of you know um and we know that wellc sites equal less work on the server but we also know that that's just not always how things are done developers building headless big Commerce storefronts run into rate limit issues and that's a problem for all developers um and we've talked to Merchants who have run into problems composing graphql queries that have sometimes resulted in sending up to six times times the number of graphql requests for every single page request that they send um rate limits are an issue for all developers like I said but in e-commerce consider just how important that can be during times like flash sales Black Friday and other major shopping events throughout the year maybe some of you developers can relate to this one but the third problem is that nobody likes being told what to do um composability is the buzzword of the year of the years but really achieving it can either be a huge lift or it can feel really really clunky um ENT entprise Merchants want to be able to use the solutions that they already have today and integrate those seamlessly with headless storefronts we know that there is no one right way to build things and developers and brands have preferences but often you're given a really prescriptive approach to follow that you don't want to Enterprise Brands and brands of any size often have existing Integrations and apps and they want them to work seamlessly with the rest of their e-commerce stack and agencies who build e-commerce storefronts want to be able to leverage the tools that they have or want to leverage the tools that they want when they want to but it's just not always an option so what's next after hearing about and seeing some of these limitations that developers have been running into we got to thinking how do we build the best possible solutions for developers and Brands who need featur composable and flexible e-commerce capabilities like I've mentioned we've invested in nextjs solutions for over four years at Big Commerce we've built our own core apps we've built our control panel we've built our our corporate website all with next and we've also witnessed firsthand their true commitment to developer experience um and combining that with our decades long experience in e-commerce we knew that nextjs was the Clear Choice for us while we plan and build for the future of e-commerce developer and brand needs next is not only part of big commerce's DNA but it is the best solution for our largest customers with the most complex needs who really want control over their own destiny so I've stirred up a bunch of problems here and now I want pull on a software engineer from Big Commerce Matt vul who is on our headless team at Big Commerce which is working to build a set of tools on top of nextjs to enable our headless storefront developers to build nextjs storefronts faster and with less friction so I'll bring out Matt give it up for Matt so I think we could probably all agree that nextjs has transform the way that we build for the web it gave us a framework that enabled us to spend less time writing boiler plate and spend more time shipping features to users that concept is our core principle on the Headless team at Big Commerce to enable developers to spend less time standing up storefronts and spend more time on the most important part of their jobs shipping beautiful e-commerce experiences for their brands with the release of the app router solutions for the problems Katie mentioned around data fetching cash management and time to launch were suddenly baked into the framework that our community already loved and because nextjs solved these problems at the framework level we had more time to think about the tools that we could build on top of it tools like UI patterns and platform Integrations that could serve to accelerate the time it takes to build a headless storefront while the app router laid the foundations of the UI patterns that we'd been looking for we also wanted to provide a library of e-commerce components like product cards and slideshows that developers could leverage in place of building them on their own now publishing component libraries Is Not A New Concept but we had introduced a bit of a unique requirement the components that we publish would need to be fully customizable in a way that would allow a developer to perfectly match them to their brand coincidentally around the time we started working on this Library Shad CN introduced a new take on a proven pattern for sharing react components shad's components were built with close attention to accessibility and best practices but also gave you the source code to copy into your project which meant code ownership free from some of the limitations asso commonly associated with Library abstraction we've taken a lot of inspiration from the patterns put into practice by Shad Cen and started to wonder if we could share components that catered to e-commerce but stayed true to shad's core principles while the components we built are still very much a work in progress we're excited to see them start to take shape the app router also gave us a number of new paradigms around data fetching and caching the ability to fetch or mutate the data that a component needed to render from within that component itself meant one less click Handler one less API route in a lot less Global State it's true by the way we wanted to take these paradigms and build on top of them to provide a cash enabled API client that also lowered the barriered entry of writing graphql queries from scratch our client abstracts our most commonly used queries into human readable method names that aim to help avoid graphql complexity limits in combined with the ability that nextjs 13 gives you to control the cach of the resource you're requesting we're finding ourselves running into API rate limits much less frequently if the underlying data changes by actions such as adding a new item to the Shopper's cart UI updates can be triggered by simply revalidating the cash for the resource that was mutated this is the experience that our developers have been asking for less time spent dealing with things like State Management but more confidence that their sites can scale with a higher tolerance for failure now being able to fetch data with an intuitive API client and then feed that data into the e-commerce components provided by our library we're finding that we're able to scaffold e-commerce Pages faster than we've ever been able to and ultimately the natively performant feat feature set of nextjs 13 combined with our set of tools optimized for e-commerce storefront development are forming the ingredients that we needed to offer a framework for creating storefronts a framework that serves as a catalyst for headless e-commerce development while we plan to open source these tools soon we're not quite there yet but with that said we didn't want to leave you without anything to take away the time and place feels right for us to invite you to the big Commerce Booth to come chat with us so we can add you to An Early Access preview of these tools before they released we feel confident that we're on the right track but we know our tools are only as strong as they are enjoyed by our community so come chat with us if you have a chance and thank you for your [Applause] time

Channel: Vercel

Views: 3,367

Keywords:

Id: EtjQoxNcnc4

Length: 11min 56sec (716 seconds)

Published: Fri Nov 03 2023