Can React Become a Full‑Stack Framework? Server Components, Actions & tRPC Explained

React has added server components and server actions, transforming it into a full‑stack framework that bridges front‑end and back‑end development.

Since 2010, the front‑end landscape has shifted from Backbone, Knockout, and Ember to Angular and React, with client‑side rendering (CSR) dominating as single‑page applications (SPA) until code‑splitting emerged.

During this era, back‑end choices were language‑agnostic, typically exposing REST APIs. As a freelance web developer, I used .NET, Java, Python, and PHP on the server side, rarely seeing TypeScript/JavaScript there.

Developers who started before 2010 were accustomed to server‑side rendering (SSR), while many who began later spent a decade building CSR apps with REST, now facing the new full‑stack React world.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡶⠛⠛⢦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⠋⠀⠀⠀⠈⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⣠⠴⠞⠛⠉⠉⠉⠉⠉⠉⠛⠒⠾⢤⣀⠀⣀⣠⣤⣄⡀⠀⠀⠀
⠀⠀⠀⣠⡶⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⢭⡀⠀⠈⣷⠀⠀⠀
⠀⠀⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⢀⡟⠀⠀⠀
⠀⣾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⡅⠀⠀⠀
⢸⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣄⣀⠀ 有人忘记了 SPA 吗？
⣾⠀⠀⣠⣤⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣤⣄⠀⠀⠀⠀⠀⠀⠀⠸⡇⠉⣷
⣿⠀⠰⣿⣿⣿⡗⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⣧⡴⠋
⣿⠀⠀⢸⠛⢫⠀⠀⢠⠴⠒⠲⡄⠀⠀⠀⠀⡝⠛⢡⠀⠀⠀⠀⠀⠀⠀⢰⡏⠀⠀
⢸⡄⠀⢸⡀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⢸⠀⠀⠀⠀⠀⠀⡼⣄⠀⠀
⠀⢳⡄⠀⡇⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⠀⢸⠀⠀⠀⠀⢀⡼⠁⢸⡇⠀⠀
⠀⠀⠙⢦⣷⡈⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠈⡇⠀⣀⡴⠟⠒⠚⠋⠀⠀
⠀⠀⠀⠀⠈⠛⠾⢤⣤⣀⣀⡀⠀⠀⠀⠀⣀⣈⣇⡤⣷⠚⠉⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣰⠇⠀⠩⣉⠉⠉⠉⣩⠍⠁⠀⢷⣟⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⡟⠐⠦⠤⠼⠂⠀⠸⠥⠤⠔⠂⠘⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣸⣧⡟⠳⠒⡄⠀⠀⠀⡔⠲⠚⣧⣀⣿⠿⠷⣶⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠻⣄⢀⠀⠀⡗⠀⠀⠀⡇⠄⢠⠀⣼⠟⠀⢀⣨⠇⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠙⢶⠬⠴⢧⣤⣤⣤⣽⣬⡥⠞⠛⠛⠋⠉⠀⠀⠀⠀⠀⠀

TypeScript has become the industry standard, offering a typed, powerful language for front‑end development; once adopted, developers rarely revert.

While OpenAPI (formerly Swagger) can generate typed API interfaces, many projects still fail to implement them correctly, leading to messy generated code and generational hand‑over issues.

There is always a generational hand‑over process.

The generated output can be chaotic.

Generated code is not always correct based on initial settings.

Remote Procedure Calls (RPC) have resurfaced in the React ecosystem through tRPC, allowing developers to call back‑end functions directly from the front‑end using TypeScript on both sides, dramatically improving productivity.

Server components let React render components on the server, accessing data sources (e.g., databases) and returning JSX UI, while server actions create HTTP API nodes that can be invoked like RPC calls.

These primitives, combined with meta‑frameworks like Next.js, turn React into a true full‑stack platform, enabling direct database and message‑queue access from React components, though a learning curve remains beyond simple CRUD apps.

With proper training, front‑end developers will soon master the patterns and best practices needed to build back‑end architecture without embedding ORM calls directly in UI components.

“I am excited about this paradigm shift! Get ready for the new era where React developers can handle everything from UI to database.”

import { getMessages } from '@/messages/queries/';
const MessageList = async () => {
  const messages = await getMessages();
  return (
    <ul>
      {messages.map((message) => (
        <li key={message.id}>{message.text}</li>
      ))}
    </ul>
  );
};
export { MessageList };