Backend is dead. Server components killed it.

After the advent of RSCs (React server components) and NextJS 14 with App router, we are in the middle of a huge paradigm shift in how code is written. NextJS was always a full-stack framework, but now, the line between frontend and backend is getting thinner and thinner.

What are React server components?

To understand RSCs and why Next14 was so 'hyped', we need to first understand what used to happen before server components:

The problems:

• Developers maintain code for frontend, backend, and the API that connects it
• Frontend doesn't know what the backend gives back (Not typesafe) - If there's any change to the API or the backend, the frontend breaks.
• Not secure - Users can find out the API routes, or intercept HTTP calls which could breach security / do database operations through the API

RSCs fix all of this. Now, the developer just needs to write one, simple server component

export async function ServerComponent(){
  const users = await prisma.user.findMany({
    include: {
      posts: true
    },
  })
 
  return(
    <>
      {users.map((user, index) => {
        <Posts key={index} posts={user.posts} />
      })}
      <AddPostButton />
    </>
  )
}

It's really that easy to do database queries, FROM THE 'FRONTEND' now!

How does it work?

RSCs work by generating the entire component - doing database calls, fetching data from external APIs and everything - as HTML, and then simply sending it to the client.

Here's a great diagram I found about it

Before this, all React components were "client" components, running in the browser. When a user visited a React page, it downloaded the code for all necessary React components, constructed the React element tree, and rendered it to the DOM.

which is too much work.
With React Server Components, the server and the browser can each focus on what they do best. Server components handle data fetching and rendering content, while client components handle stateful interactivity

This means:

• Improved performance
• Less client-server round trips
• Enhanced security
• Better developer experience

So, there's no need for a backend! All your code sits in these server components, in a single, neat, efficient, secure codebase. Perfect.

But that means...

Backend isn't dead.

With RSCs, Backend isn't dead. In fact, backend is making it's way into the frontend.

But...

1. Cron Jobs and Scheduling: These tasks, essential for automating scripts and functions at specified times, still rely on server-side capabilities.
2. Rendering Videos/Images: Processing and rendering media files often require significant computational resources and specialized libraries, typically managed on the server side.
3. Running AI Models: AI and machine learning models, especially those with complex computations, are more effectively run on backend servers. Languages like Python, with their extensive libraries and frameworks for AI, offer capabilities that JavaScript and frontend technologies can't match.

Server components can't do this:

Tasks that need extra computation even after sending a response, like rendering videos and then storing them into a database, can't be done by RSCs yet.

thoughts

i don't have a conclusion, but

React server components have truly made it easy to do almost everything without the need of a backend. Now is the best time to start shipping and well, get really, really good at writing server components, understanding how they work and making the most use of the most modern technologies.

but at the same time, contrary to the title of this blog, backend isn't dead. It's just built into nextjs now.