Creating Scalable User Interfaces in Next.js: Insights from Ishar Jain

Do you want to build web applications that load fast, are easy to maintain, and work efficiently? If yes, then you should learn about scaling user interfaces (UI) in Next.js. In a recent talk, Ishar Jain, a front-end developer, shared some great tips on how to make UIs that perform well and remain scalable as your project grows.

Meet Ishar Jain: The Speaker Behind the Talk

Ishar is an undergraduate student at Maharaja Agrasen Institute of Technology (MAIT), Delhi. He works as a front-end developer at FourCore and is also a teaching assistant at Cuvette. With his experience in Next.js, he explained how to avoid cluttering projects with too many files and instead focus on making fewer files more powerful. His approach, called vertical scaling, helps in improving performance and reducing unnecessary complexity.

This blog will walk you through the key takeaways from Ishar’s talk, including methods to scale your UI, how React Query simplifies data fetching, and answers to common questions about Next.js.

Scaling UI in Next.js

Ishar introduced four main strategies to make UI scalable in Next.js. These strategies help in reducing redundant code, improving data management, and keeping the project structured.

1. Composition Feature: Reusing Components

Instead of creating separate components for similar features, you can combine them into one and control them using props. For example, if you have two different step layouts (horizontal and vertical), instead of making two components, you merge them into a single component and use props to switch between the two styles.

This method keeps your file structure simple and avoids unnecessary duplication. As Ishar puts it:

"What we are essentially doing is merging some elements together... keeping the file structure the same while making the components more flexible."

2. Server-Side Calls: Fetching Data on the Server

A common mistake in front-end development is fetching too much data on the client side. This can slow down applications and expose sensitive logic. Instead, Next.js allows you to fetch data on the server itself, keeping your client-side code lightweight and secure.

Ishar describes Next.js as a backend framework because of its ability to perform server-side operations within its codebase. This feature is useful for connecting to databases, making API calls, and handling authentication without exposing your backend logic.

"Next.js is a backend framework... because it allows us to do these things on the server inside the Next.js codebase while keeping the client-side code simple."

To deep dive into why, Next JS is a backend framework, go and read this blog.

3. React Query: Simplified State and Data Fetching

React Query (now called TanStack Query) is a powerful library that helps manage API requests and state efficiently. It provides features like:

• Automatic caching (so data isn't fetched again unnecessarily).

• Automatic retries if a request fails.

• Built-in loading and error states.

React Query can work on both the client and server, making it environment-independent. This means you can use it with any framework and still get benefits like smoother API handling.

"React Query is platform-agnostic because it works on any framework and can run on both the client and the server."

4. Server Actions: Running Functions on the Server

Next.js Server Actions allow developers to run functions on the server but call them from the client. This means you don’t always need to write an API route—some actions can run directly on the server, reducing unnecessary client-server communication.

However, Server Actions should be used carefully because they can increase server costs and pose security risks, such as SQL injections if not handled properly.

"Server actions are just functions that run on the server but can be called from the client."

Deep Dive into React Query

React Query makes handling data fetching much simpler. Instead of writing long API calls with loading states, it automatically manages caching, refetching, and error handling.

It also provides:

• Callbacks for success/failure after an API call.

• Automatic retries if a request fails.

• Optimistic updates, which update the UI before the data is confirmed from the server.

By using React Query, developers can reduce the amount of manual state management needed and make their applications more responsive.

Q&A from the Talk

Question: Can we use Next.js as a backend?
Answer: Yes, Next.js can be used as a backend. It was built for UI engineers who want to write backend code. It allows handling API routes, authentication, and database operations within the same framework.

Question: What is the difference between API calls and Server Actions?
Answer: API calls require a network request from the client to the server, whereas Server Actions are functions that run directly on the server without a network call. Server Actions reduce client-server communication and improve performance.

Question: Can we use gRPC or WebSockets in a Next.js backend?
Answer: It might be possible, but it’s not recommended. WebSockets and gRPC require persistent servers, while Next.js relies on serverless functions, which are stateless. For real-time applications, a dedicated backend with WebSockets or Firebase is a better option.

Question: What about the power of Server Actions?
Answer: Server Actions are powerful but risky. Frequent calls can increase server costs, and improper usage can lead to security risks like SQL injection. Proper validation and sanitization are necessary when using them.

Question: How can we host a Next.js application to reduce costs?
Answer: Hosting on Vercel can be expensive. To reduce costs, you can bundle the Next.js app as a static site and host it on Netlify, Cloudflare Pages, or DigitalOcean. However, this may remove server-side features like API routes and Server Actions.

Question: How do you handle authentication in Next.js?
Answer: You can use authentication libraries like NextAuth.js, Clerk, or Supabase. NextAuth.js is flexible, Clerk simplifies user management, and Supabase offers authentication with database support.

Question: What are some project ideas to understand Next.js better?
Answer: Building projects helps in understanding Next.js better. Some ideas include:

1. Fetching API data and comparing client-side vs. server-side rendering.

2. Creating a dashboard with React Query for state management.

3. Implementing authentication with NextAuth.js or Clerk.

4. Developing an e-commerce store with API routes and cart functionality.

Question: When should you use React Query vs. Server Actions?
Answer: Use React Query when fetching data from an external API or if your backend is separate from Next.js. Use Server Actions when handling database operations within Next.js’s built-in server functions.

Question: What is Ishar's take on the rise of AI?
Answer: AI is a tool, and those who learn to use it effectively will have an advantage. If someone uses AI tools better, they may take someone else's job. Developers should focus on integrating AI into their workflow.

Question: What was the last anime Ishar binged?
Answer: Blue Lock.

Question: What is his take on copy-pasting code?
Answer: Copy-pasting is not bad if you understand the code. Beginners should analyze the code before using it. Blindly copying can introduce security vulnerabilities and bugs into the project.

Conclusion

Ishar Jain’s talk provided valuable insights into how to build scalable UIs in Next.js. By reusing components, fetching data on the server, using React Query, and utilizing Server Actions, developers can create efficient and maintainable applications. However, understanding the limitations and risks of each approach is important to make the right technical decisions.

To explore these concepts further, check out the full tech talk on TechKareer’s YouTube channel and stay ahead of the curve!

Cover credits : https://dev.to/alexeagleson/how-to-build-scalable-architecture-for-your-nextjs-project-2pb7