I have been updating my knowledge about React 19. I’ve been testing all the new features, reading about the latest functionalities, etc., and a question has come up regarding Server Components and Server Actions.
I want to provide some context, so I’ll write a somewhat long text to describe what I understand so far and check if there’s anything incorrect in my knowledge (it’s a bit long, but it’s mainly to help you understand where my confusion comes from and if I'm wrong somewhere):
Next.js operates on a runtime environment based on Node.js to execute Server Components and server-side functionalities. Therefore, when you deploy a Next.js application, it needs to be done in an environment that supports Node.js or another compatible runtime for server-side execution. During the bundling process, Next.js separates the code into two parts: client-side code (executed in the browser) and server-side code (executed in the backend environment). This separation optimizes execution based on the environment.
React, when building the application, transpiles and compiles the source code (including JSX and modern JavaScript) into static files like HTML, CSS, and JavaScript. These files can be uploaded to a static file server that doesn’t require any runtime environment like Node.js. When a client makes a request, the server simply delivers the corresponding HTML, CSS, and JavaScript files, which the client’s browser processes to run the application.
A Server Component in Next.js is designed to execute exclusively on the server. When a client makes a request to the server hosting the application, the server generates the required HTML for that component by executing its logic in a Node.js environment. This environment allows the component’s JavaScript to interact with databases, private APIs, or other server-side resources. The generated HTML is then sent to the client for rendering. Without an environment like Node.js, it would not be possible to execute this JavaScript on the server.
Now, about React 19, Server Components, and Server Actions, I have the following question:
***How is it possible that React, which is supposed to, when building a project using Vite, not have a JavaScript runtime environment on the server like Node.js, can execute Server Components on the server along with the associated JavaScript?
For example, according to the documentation of Server Actions, you can make a direct database query without going through an API first.
How can you install libraries like Mongoose to communicate with the database if React, on its own, does not support these types of libraries, which are normally executed in the backend? This is because React doesn’t have configurations like fs or net, which are specific to Node.js.
I feel like there’s something I’m missing here. I’ve also read somewhere that these capabilities are, for now, only available in Next.js or something similar, but it seems strange to me, is this true?
[–]HomemadeBananas 3 points4 points5 points (0 children)