React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

"Wait, is this a Next.js feature?" Nope — this is for usage with any React server framework.

Love the video Don't love the fact that you have to install another package and opt-in to this major footgun defender

This makes sense as a protection layer, but isn't it just a self-inflicted problem in the first place? Shouldn't the framework protect the developers from mistakes instead of requiring you to know this workaround?

It helps to work backwards from the ideal DX: what if you didn't have to write anything, and the framework could just magically figure everything out for you? And then look at reality. We need some sort of signal to tell the compiler the environment the code runs in. Ideally we don't want to add these checks in every single file. And ideally it wouldn't be something specific to one framework. Instead, you want a standard for the ecosystem (whether Next or other frameworks). A single line to enforce either "server-only" or "client-only". It's not auto-magical but some explicitness is a feature and not a bug. It's an adjustment though because most apps have completely separate frontend and backend words, and this model pairs well when building a "data access layer" inside of a fullstack app.

If you want to learn more, this post goes in much more detail on security in Next.js.

IMHO a component never should call a database directly. I don’t mind if it’s a server component. Why we don’t call the database endpoint directly from a client? Cos it’s a security breach. Technology go ahead fast but it doesn’t mean that we should forget foundations.

More often, you're likely calling a "data access layer" where you co-locate your backend logic.

Decent workaround but importing a module to guard against code running in the wrong environment is not great.

This is great but now we have use client, use server, and this? I can see this being very confusing

I like the framing here personally!