{"library":"server-only","title":"Server-Only Module Enforcer for React","description":"The `server-only` package is a fundamental marker utility in the React Server Components (RSC) architecture. Its primary purpose is to enforce that a JavaScript module, and any code within it, can only be executed within a server-side environment. This is crucial for preventing sensitive server-side logic, such as database queries, direct file system access, or API keys, from accidentally being bundled and exposed to the client-side. The package achieves this through a clever use of conditional exports in its `package.json`. In a React Server Component build environment, it resolves to an empty file, effectively doing nothing. However, if imported into a client-side component, it resolves to a file that throws a build-time error, acting as a safeguard against data leaks, increased bundle sizes, and runtime failures. It is maintained by the React team, currently at version `0.0.1`, and its stability reflects its minimalistic and declarative role within the RSC paradigm. It differentiates itself by providing a strict, compile-time guarantee for server-only code separation, complementing newer runtime APIs like `experimental_taintObjectReference` which offer finer-grained control.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install server-only"],"cli":null},"imports":["import 'server-only';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"/* src/lib/server-utils.ts */\n// This directive ensures that this entire file can only be imported in Server Components.\nimport 'server-only';\n\nimport { promises as fs } from 'fs';\n\nexport async function getSecretData() {\n  // This code will only run on the server.\n  // Accessing process.env directly is safe here.\n  const apiKey = process.env.DATABASE_API_KEY ?? 'default_api_key';\n  console.log('Fetching secret data on the server...');\n\n  // Simulate reading from a server-side file system\n  const fileContent = await fs.readFile(process.cwd() + '/src/lib/server-config.txt', 'utf-8');\n\n  return {\n    message: `Hello from the server! Key used: ${apiKey.substring(0, 5)}...`,\n    config: fileContent\n  };\n}\n\n/* src/app/page.tsx (Server Component) */\n// This is a Server Component, so it can safely import 'server-utils.ts'\nimport { getSecretData } from '../lib/server-utils';\n\nexport default async function HomePage() {\n  const data = await getSecretData();\n  \n  return (\n    <div>\n      <h1>Welcome to the Server Component App</h1>\n      <p>{data.message}</p>\n      <p>Server config snippet: {data.config.substring(0, 20)}...</p>\n      {/* You cannot import 'use client' components here that directly use getSecretData */}\n    </div>\n  );\n}\n\n// Example of how to prevent client-side usage, if you tried to import getSecretData in a 'use client' component:\n// /* src/components/ClientComponent.tsx */\n// 'use client';\n// import { getSecretData } from '../lib/server-utils'; // This line would cause a build error\n// export default function ClientComponent() { return <div>Client component</div>; }","lang":"typescript","description":"Demonstrates marking a utility file as server-only and its safe usage within a React Server Component, illustrating how to prevent accidental client-side imports.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}