[Docs] .server modules and .client modules (remix-run#12502)

* [Docs] .server modules

* Remove line-break

* Signing CLA

* Fix line-break

* .client modules

* Fix line-break

* Apply suggestions from code review

---------

Co-authored-by: Brooks Lybrand <[email protected]>

contributors.yml

@@ -225,6 +225,7 @@
 - pavsoldatov
 - pcattori
 - petersendidit
+- pierophp
 - printfn
 - promet99
 - proshunsuke

docs/explanation/special-files.md

@@ -281,6 +281,45 @@ For an example, please refer to the default [`entry.server.tsx`][node-streaming-
 
 Note that this does not handle thrown `Response` instances from your `loader`/`action` functions. The intention of this handler is to find bugs in your code which result in unexpected thrown errors. If you are detecting a scenario and throwing a 401/404/etc. `Response` in your `loader`/`action` then it's an expected flow that is handled by your code. If you also wish to log, or send those to an external service, that should be done at the time you throw the response.
 
+## `.server` modules
+
+While not strictly necessary, `.server` modules are a good way to explicitly mark entire modules as server-only.
+The build will fail if any code in a `.server` file or `.server` directory accidentally ends up in the client module graph.
+
+```txt
+app
+├── .server 👈 marks all files in this directory as server-only
+│   ├── auth.ts
+│   └── db.ts
+├── cms.server.ts 👈 marks this file as server-only
+├── root.tsx
+└── routes.ts
+```
+
+`.server` modules must be within your app directory.
+
+Refer to the Route Module section in the sidebar for more information.
+
+# `.client` modules
+
+While uncommon, you may have a file or dependency that uses module side effects in the browser. You can use `*.client.ts` on file names or nest files within `.client` directories to force them out of server bundles.
+
+```ts filename=feature-check.client.ts
+// this would break the server
+export const supportsVibrationAPI =
+  "vibrate" in window.navigator;
+```
+
+Note that values exported from this module will all be `undefined` on the server, so the only places to use them are in [`useEffect`][use_effect] and user events like click handlers.
+
+```ts
+import { supportsVibrationAPI } from "./feature-check.client.ts";
+
+console.log(supportsVibrationAPI);
+// server: undefined
+// client: true | false
+```
+
 [react-router-config]: https://api.reactrouter.com/v7/types/_react_router_dev.config.Config.html
 [route-module]: ../start/framework/route-module
 [routing]: ../start/framework/routing
@@ -289,3 +328,4 @@ Note that this does not handle thrown `Response` instances from your `loader`/`a
 [rendertopipeablestream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
 [rendertoreadablestream]: https://react.dev/reference/react-dom/server/renderToReadableStream
 [node-streaming-entry-server]: https://github.com/remix-run/react-router/blob/dev/packages/react-router-dev/config/defaults/entry.server.node.tsx
+[use_effect]: https://react.dev/reference/react/useEffect