Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️

Hi, I'm Ankita. Have you ever wondered what it takes to build a lightning fast website? Well, I'm going to show you in this presentation. My topic is build a lightning fast site with next.js, graphql, and Tailwind. Hi again, I'm Ankita. I have been working in the industry for more than a decade now. I've scaled and architected many apps with millions of clients, and I'm currently a creator with over 10,000 students online. It's extremely important to pick the right tools for the job, because without that, how do we even build a performance site? So you do need the right tools, just like this SpongeBob image here. And with next.js, graphql, and Tailwind, it is honestly a really power combo, because it will really help you to build a performance site. So first, very quickly, what is next.js? It is a react framework for production. It gives you a lot of tooling out of the box, so you don't have to build a lot from scratch, such as routing and performance. Everything is next.js is something that thinks about it from the get-go. Let's look at the rendering techniques in next.js. And this is why, this is one of the biggest reasons why next.js does add a lot of performance, and it helps with a lot of performance in general. So this is a very simple web image, for example, and you can see there are three different rendering techniques, such as static site regeneration, incremental site regeneration, and server-side rendering. All these specific techniques have different ways you can cache data. For example, in static, if your site is completely static, you can cache all that data at build time, and it will be available for you. Whereas in ISR, which is incremental site regeneration, you can say after how long you want the data to be cached, and in server-side rendering, you are requesting that data over and over again. It's also really good for seo, because the html is also going to be available for you right before. So when the bot is crawling your site, it is going to rack higher because of that as well. So in the first image, we are caching the three countries, but not Mexico. In incremental site regeneration, we do want a dynamic requirement for Mexico. And lastly, in server-side rendering, all the pages and all the country pages are being re-rendered. All right, so performance with next.js. These are very cool and extremely important for you to check it out. I find that a lot of developers don't do that, so definitely check this out for really building a lightning-fast site. So for example, dynamic imports. In this case, we have a model here, right? And in the model case, we are using a dynamic import, so you can only choose to load the model when it's actually needed. When it's not needed, don't load it. Second is deferring non-essential scripts. next.js gives a script component to us, and you can see that over here, I'm only loading ConvertKit, which is something that I use for my newsletter. And I'm only loading it after the page is fully loaded, using after interactive property. It's a react component, right? It looks like a react component, so it makes it really easy for us, because why should I wait for my newsletter script to load when my entire site is ready to go? Second, third is next.js image component. You might have heard about image component in general. It gives you a lot of performance benefits out of the box. It does not shift your layout, so it does give you a better lighthouse score, but also improves performance as well. At the same time, AVF and WebP is also supported and built in, so you can get fast performance images right away. Server-side rendering and caching as well. Again, another feature that not a lot of developers take advantage of, so I really ask you to check it out, which is the cache control header that allows you to say that, hey, only cache the specific content of the page for two hours. 7,200 seconds is two hours, and after two hours, the page will continue to be served, for example, for a grace period of 60 seconds, as I mentioned here, while it's still, while revalidate prop, and the next user will get fresh data. So this is, again, extremely important. We are adding performance to a already performed framework, so imagine how fast our site is going to be. graphql. We all love graphql. You only get the data that you ask for on top. I'm only asking for hero name height. I'm only going to get that at the bottom. So that is really performing on its own, because you don't have a really huge object that you're downloading every time. With graphql performance, you get persistent queries, so you can persist your queries. You can use apollo Client to basically cache your data. You can use in-memory cache with apollo Client and cache the data on your browser, along with storing it on the CDN as well. So you do get really added benefits, too. And again, don't ask for data that you don't need it, so it gives you performance, too. apollo Client does do the heavy lifting for you, like I mentioned already. So it is extremely important to use apollo Client with it, too. And you might be wondering what the api might look like. Well, we all love hooks, so there you go. So you can see that you get a use query hook with apollo Client, and it gives you the three states, loading error and data automatically, so you don't have to worry about, you know, recoding that in every component, because it already gives you out of the box. And it stores all that data in a cache in your apollo Client in-memory cache. So you don't have to refetch, for example, navigation that's used for in every page. Lastly, Tailwind. Tailwind is one of my favorites. You think of it like a giant box of Lego. You throw it all on the floor, and you build it out from scratch, and you discard what you don't need. And that's exactly what Tailwind is. It's an api for your design system. When css can get complex, so Tailwind makes it easier. Why Tailwind? Well, semantic class names are harder to maintain. You get a design system out of the box, and it makes you a better css developer. I can assure you that after I rebuilt my entire site with Tailwind, I personally found a huge difference in my productivity, because I wasn't switching back and forth. And when we're talking about performance, we're also just talking about the build system as well, not just what the users see, because that also adds to our overall developer productivity. So you get these different utility classes that helps you work with the constraints of the system. And instead of entering your style sheets with different style names and whatnot, you can basically use what's in the design system. For example, with in this case. Again, you can use a VS Code plugin as well, and it will give populate all the different colors for you. And this is what the design system for Tailwind might look like. And you get performance. It's really hard to get a performance build of less, more than 10 KB in with Tailwind. And small practices do lead to better overall performance as well. And this is why let's talk about very quickly what the future looks like. Well, our future is we do want to make UI development really easy and faster. react server components with suspense. You can load your components on the server, which is huge for us. Tailwind is supporting majority of css styles, which is really awesome. So you don't have to think css as being complex. You can use utility classes and you can scale very easily as well. Well, this is pretty much the end. If you have any questions, comments, feedback, please tweet me at Kulkarni Ankita 9 as well. And lastly, if you're looking to grow into a leader or you're a developer and want to take your career further, then I have a course coming as well that will help you grow from a developer to a leader. You can check out this link and this handy barcode as well. All right, you did it. Thank you so much for listening and congrats on listening to this presentation and I hope you have a wonderful day or night. All right, thank you. ♪♪♪