Use Server Server Only

While I was using “use server” in Next.js, I have encountered keyword “server-only’. I want to dig into this more.

“user server”

Since Next,js introduced Server Actions, you need to specify that components that are only rendered on server, never on client side code. “use server” on the top of the file. When it was introduced, people were making a meme why they are calling SQL query call inside React Component. However, those code are intended to run only server. It is not good idea to run those code on client side because of potential security issues.

For example, having file called action.ts which contains multiple server action related functions to fetch API and make a database query.

"user server";
export async function deleteImage(formData: FormData) {
  const id = parseInt(formData.get("id") as string);
  await db.delete(imageTable).where(eq(imageTable.id, id));
}

So what is “server-only”

This package prevents server side code running from being accidentally imported and executed in client side components. The good thing is when the server side code is imported into client side, it will throw a error during build process.