{"library":"server-only-context","title":"Server-Only Context for React Server Components","description":"`server-only-context` is a lightweight utility designed to provide request-scoped context specifically for React Server Components (RSC). It helps mitigate the problem of prop drilling in server-side rendering environments by leveraging React's experimental `cache` function to store and retrieve values associated with the current request. This ensures that context values are isolated between different concurrent server requests, which is crucial for multi-user applications. The current stable version, 0.1.0, indicates it's an early-stage project that is actively developed but may still be subject to changes. Its core differentiator is its exclusive design for the server-side, contrasting with traditional React Context which is primarily client-side or hydrates from server-rendered content. It offers a straightforward API to create getter/setter tuples for managing context values.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install server-only-context"],"cli":null},"imports":["import serverContext from 'server-only-context';","import { getLocale, setLocale } from '@/context/locale';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"/* src/context/locale.ts */\nimport serverContext from 'server-only-context';\nexport const [getLocale, setLocale] = serverContext('en');\n\n/* src/context/user.ts */\nexport const [getUserId, setUserId] = serverContext('');\n\n/* src/app/layout.tsx */\n// Example of a root layout that might set initial context\n// import { setLocale, setUserId } from '@/context'; // In a real app, combine contexts into one file or use aliases\n// export default function RootLayout({ children }: { children: React.ReactNode }) {\n// // In a real scenario, you'd extract locale/userId from headers or cookies here\n// setLocale('en-US'); \n// setUserId('guest');\n// return {children};\n// }\n\n/* src/app/[locale]/[userId]/page.tsx */\n// This represents a server component page where context is set based on URL params\nimport { setLocale, setUserId } from '@/context/locale'; // Assume these are from a combined context file for brevity\nimport { getLocale, getUserId } from '@/context/user'; // Assume these are from a combined context file for brevity\n\ninterface UserPageProps {\n params: { \n locale: string; \n userId: string; \n };\n}\n\nasync function MyComponent() {\n // In a real app, this might be a child component deep in the tree\n const locale = getLocale();\n const userId = getUserId();\n\n return (\n

Hello {userId || 'Guest'}!

Current Locale is: {locale || 'Default'}

This data was fetched using server-only context.

\n );\n}\n\nexport default async function UserPage({ params: { locale, userId } }: UserPageProps) {\n setLocale(locale);\n setUserId(userId);\n\n // Demonstrate subsequent access within the same request scope\n const currentLocaleCheck = getLocale();\n const currentUserIdCheck = getUserId();\n console.log(`Context set to: locale=${currentLocaleCheck}, userId=${currentUserIdCheck}`);\n\n return ;\n}","lang":"typescript","description":"This quickstart demonstrates how to define server-only context and then set and retrieve values within a React Server Component structure, mimicking a typical page and its child components.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}