Future of Backend Development: Exploring Next.js with Insights from Ishar Jain

Ever felt like the lines between front-end and back-end are blurring? Well, Ishar Jain, an undergraduate from MAIT, Delhi and a front-end developer at FourCore, as well as a teaching assistant at Cuvette, certainly thinks so. In a recent tech talk, Ishar explained that Next.js is evolving to be "more backend than frontend," and this blog will explore the key points of the talk.

Why Next.js is More Backend Than Frontend?

Journey of Web Development so far

To understand Next.js's evolution, we first need to trace the journey of web development:

Static HTML Era: Early websites were simple, static pages, mostly used for sharing documents.
jQuery Revolution: Interactivity was introduced to the web with jQuery.
Angular's Comprehensive Solution: While Angular aimed to offer an all-in-one solution, it struggled due to its rigid, framework-first approach.
React's Rise: React, initially dismissed as a "toy," became popular for its component-based architecture. However, it led to large JavaScript bundles being shipped to the client.

Now, modern frameworks like Next.js, Solid, Svelte, and Nuxt are taking us back to "shipping pages" with optimized rendering strategies.

So, what exactly is Backend?

It's the server-side logic that handles requests, processes data, and interacts with databases. Traditionally

the backend reads and writes to databases
processes requests and sends responses
handles events
sends emails and notifications.

Full-stack development, according to Ishar, “ isn't a simple merger of front and back end but rather a term which encompasses the capability of a developer to make products full fledged as per the business requirements. ”

With Next.js, many of the tasks traditionally performed by the backend can now be handled within the framework itself, blurring the lines between front and back end. This includes middleware, redirections, and proxies.

Thinning the boundary between Client and Server

Modern frameworks like Next.js enable functions previously confined to backend servers, such as database interactions, request processing, and event handling. Here are some of the key ways Next.js is blurring the lines:

Next.js Rendering Methods:

Next.js provides multiple rendering strategies.

Client-Side Rendering (CSR): In this method, the browser downloads JavaScript, renders a basic shell of the page, fetches the data, and then displays the content. The user might see a blank screen or a loading indicator while the page is being populated.
Server-Side Rendering (SSR): Here, the server sends pre-rendered HTML to the client, which means users see content sooner. However, the client still needs to download and execute the JavaScript bundle to make the page interactive.

Source : images.theodorusclarence.com/

Shift to SSR (Server-Side Rendering): SSR involves the server sending pre-rendered HTML, improving the initial page load time. Ishar highlighted Amazon's finding that a 4ms latency improvement had a significant business impact, showing the importance of quick loading times.
RSC (React Server Components): In modern Next.js and React, by default, everything happens on the server. The server generates the initial HTML, which reduces the amount of Javascript sent to the client and allows pages to load faster.
Suspense and Streaming: These allow for parallel client-side rendering and server-side data fetching. The client can show a shell while data is loading on the server, with content hydrated upon arrival.

Here is an interesting blog post to visualize these methods. You can go and explore by Clicking here.

Limitations using Next.js as a full-fledged backend

According to Ishar, these are some of the major drawbacks:

Websockets: Limited support for real-time functionality.
Cron Jobs: While available via Vercel, they are not as flexible or cost-effective as dedicated servers.
Large File Uploads: Still challenging, even on the same network.
Queues: No native support for task queues in Next.js yet.
File Naming Conventions: The requirement to name everything 'page.jsx' is restrictive.
Self-Hosting with Server Actions: Currently limited, requiring reliance on Vercel.

Code Demonstration of a Counter App

Ishar demonstrated a counter app using both server and client components to highlight the differences between the two approaches.

Client-Side State: Loses its value on refresh.
Server-Side State: Persists across devices using cookies.

He showcased how server actions (triggered using the “use server” function) can handle server-side logic without sending JavaScript to the client.

To dive deeper into the code demonstration, check out the full video available on TechKareer’s YouTube channel.

Q/A Summary from Ishar's Presentation

Question: What’s a good use case for server state?

Answer: Ishar explained that server state is particularly useful when you need a shared state accessible across multiple clients. For example, a blog page counter can be implemented without relying on a database or REST API by leveraging the server state, provided the server ensures high uptime. This eliminates the need for complex backend configurations while maintaining consistency.

Question: How do I handle learning new tech stacks for interviews?

Answer: Ishar recommends following a "20-hour framework" for learning new tools. If you are already familiar with the parent technology (e.g., React), transitioning to a related tool like React Query should take no more than 20 focused hours. He emphasized prioritizing the basics and building a simple project instead of trying to master every feature, as this approach enhances both learning and confidence.

Question: Is full-stack development still a lucrative role given the competition?

Answer: According to Ishar, "full-stack" is more of a buzzword than a rigid role. It’s a spectrum that highlights a developer's ability to deliver end-to-end solutions. To stand out, focus on showcasing your unique skills and demonstrating the value you bring to projects, rather than being overly concerned with labels or specific tech stacks.

Question: How is Next.js different from template engines like Pug or Mustache?

Answer: While template engines like Pug or Mustache and Next.js share similarities in sending HTML to the client, Next.js provides a far superior developer experience. It offers advanced features like routing, Incremental Static Regeneration (ISR), and selective rendering, which elevate its usability and efficiency. These capabilities make Next.js a versatile and modern framework compared to traditional template engines.

Question: Are there any hacks for event-based email or notifications with Next.js?

Answer: For sending emails, Ishar recommends using Resend, a service that integrates seamlessly with Next.js and removes the need for an SMTP server. For notifications, he still prefers reliable third-party services like Upstash or AWS to handle queues and SMS notifications efficiently, ensuring scalability and ease of implementation.

Next.js is redefining web development by integrating backend-like capabilities into a front-end framework. While it isn’t a complete backend replacement, its innovative features like React Server Components , Incremental Static Regeneration, and multiple rendering strategies make it a game-changer.

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