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

Rate this content
Bookmark

Next.js has grown in popularity over the past couple of years with features like server-side rendering, incremental static regeneration, image optimization, and more. Next.js is known as the production ready framework for React. In contrast, GraphQL is known for not just returning data for what you need with good schema design practices but also a good dev experience. In this talk, I’ll talk about how one can build an app that not just scales but also has high performance with Next.js, GraphQL and Tailwind. And Lastly, the future of CSS and Frontend development is building utilities, so CSS does not feel like an afterthought. At the end of this talk, you will learn how to go from making a sample app to a highly performant production-ready application.

Ankita Kulkarni
Ankita Kulkarni
9 min
24 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.

Available in Español

1. Introduction to Building a Lightning-Fast Site

Short description:

Hi, I'm Ankita. I'll show you how to build a lightning-fast site with Next.js, GraphQL, and Tailwind. Next.js is a React framework for production that provides tooling out of the box. It offers rendering techniques like static side regeneration, incremental side regeneration, and server side rendering. These techniques improve performance and SEO. Next.js also supports dynamic imports and deferring non-essential scripts. The Next.js image component is worth exploring.

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.

2. Next.js Performance and Caching

Short description:

Next.js provides performance benefits, including layout stability and improved lighthouse score. It supports AVF and WebP for fast performance images. Server-side rendering and caching, along with cache control headers, further enhance performance.

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.

3. GraphQL, Apollo Client, and Tailwind

Short description:

GraphQL allows you to get only the data you need, improving performance. Apollo Client handles caching and provides a use query hook for easy data retrieval. Tailwind simplifies CSS by providing a design system and utility classes, enhancing productivity and performance. The future holds exciting possibilities.

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.

4. Future Goals and Conclusion

Short description:

Our future goal is to make UI development easier and faster. React server components and Tailwind CSS simplify development by allowing server-side rendering and providing utility classes for easy scaling. If you have any questions or want to grow your career, reach out to me on Twitter or check out my upcoming course. Thank you for listening!

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Workshops on related topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura