Skip to content

Commit f5f3ab6

Browse files
committed
Document server-only and client-only packages
1 parent 4cf5bd0 commit f5f3ab6

File tree

1 file changed

+14
-2
lines changed

1 file changed

+14
-2
lines changed

docs/how-to/react-server-components.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,9 +235,19 @@ export function ServerComponent() {
235235

236236
### `.server`/`.client` Modules
237237

238-
To avoid confusion with React's `"use server"` and `"use client"` directives, support for [`.server` modules][server-modules] and [`.client` modules][client-modules] is no longer built-in.
238+
To avoid confusion with RSC's `"use server"` and `"use client"` directives, support for [`.server` modules][server-modules] and [`.client` modules][client-modules] is no longer built-in when using RSC Framework Mode.
239239

240-
If you need either of these features, we recommend using the [`vite-env-only` plugin][vite-env-only] directly. For example, to ensure `.server` modules aren't accidentally included in the client build:
240+
As an alternative solution that doesn't rely on file naming conventions, we recommend using the ["server-only"][server-only-package] and ["client-only"][client-only-package] packages. These are commonly referred to as "poison pills" because they will break the build if they're included outside of the designated environment.
241+
242+
For example, to ensure a module is never accidentally included in the client build, simply import the `server-only` package as a side effect.
243+
244+
```ts filename=app/utils/db.ts
245+
import "server-only";
246+
247+
// Rest of the module...
248+
```
249+
250+
If you'd like to quickly migrate existing code that relies on the `.server` and `.client` file naming conventions, we recommend using the [`vite-env-only` plugin][vite-env-only] directly. For example, to ensure `.server` modules aren't accidentally included in the client build:
241251

242252
```tsx filename=vite.config.ts
243253
import { defineConfig } from "vite";
@@ -1023,3 +1033,5 @@ createFromReadableStream<RSCServerPayload>(
10231033
[vite-env-only]: https://github.com/pcattori/vite-env-only
10241034
[server-modules]: ../api/framework-conventions/server-modules
10251035
[client-modules]: ../api/framework-conventions/client-modules
1036+
[server-only-package]: https://www.npmjs.com/package/server-only
1037+
[client-only-package]: https://www.npmjs.com/package/client-only

0 commit comments

Comments
 (0)