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

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, a skill and architect at 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 the 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 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 side regeneration, incremental side 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 side 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 checking 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 us 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, whilst with stale, 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 performant on its own because you don't have a really huge object that you're downloading every time.

With GraphQL performance, you get persistent query, 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, but then 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 recording 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. 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 rebuild 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 littering your style sheets with different style names and whatnot, basically you'd watch 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 wanna 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 out as well that will help you grow from a developer to a leader. You can check out this link and this handy bar code 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.