My server component is ending up on client side for some reason

Question

Even though i have used a 'use server' directive on my server file the file somehow is ending up on the client side of the app, that is, it is showing up in the browser.

"use server";
import { productListSorter } from "@/util/utility";
import oracledb from "oracledb";

let connect = await oracledb.getConnection({
  user: "student",
  password: "studentpassword",
  connectString: "localhost:1521/XEPDB1",
});

export const getAllProducts = async () => {
  const products = await connect.execute(`SELECT * FROM products`);

  return productListSorter(products.rows);
};

i was expecting it to not show up on the client side and it is doing so therefore exposing my database credentials

Answer 1

Server componentes are rendered in the server, and its result is streamed to the browser, but your server component code is not present in the client bundle, so your credentials are safe.

This blog post states:

Server Components (RSC) execute in a separate module system from the Client Components to avoid accidentally exposing information between the two modules.

Also in the docs:

Security: Server Components allow you to keep sensitive data and logic on the server, such as tokens and API keys, without the risk of exposing them to the client.

But it is recommended to use a DAL:

Our recommended approach for new projects is to create a separate Data Access Layer inside your JavaScript codebase and consolidate all data access in there. This approach ensures consistent data access and reducing the chance of authorization bugs occurring.

Another approach is to just put your database queries directly in your Server Components. This approach is only appropriate for rapid iteration and prototyping. E.g. for a small product with a small team where everyone is aware of the risks and how to watch for them.

A third-party blog post about RSC:

Enhanced security: Sensitive data like auth tokens or API keys used in RSCs are executed on the server and never exposed to the browser, preventing unintentional leaks