Because server components run in a node.js environment, while client components run in the browser, they have access to different APIs and properties.

React Environment Values

server
node.js
Window dimensions
-
Screen dimensions
-
window.devicePixelRatio
-
navigator.userAgent
-
document.title
-
location.href
-
Storage
-
history.length
-
Web Audio API
-
env.NODE_ENV
production
import.meta.url
file:///vercel/path0/app/(routes)/demos/environment/environmentValues.tsx
process.cwd()
/var/task
__dirname
/var/task/.next/server/app/(routes)/demos/environment
process.version
v20.18.3 (linux/x64)
CPU architecture
x64
Network interfaces
vint_runtime
Memory usage
20 MB / 28 MB
Uptime
0d 0h 0m 0s
client
node.js

Next.JS / Vercel Specific Environment Values

server
node.js
process.env.MY_SECRET
SUPER SECRET
process.env.NEXT_PUBLIC_NOT_SECRET
NOT ACTUALLY SECRET
os.hostname()
169.254.86.157
os.platform()
linux
os.release()
5.10.235-247.919.amzn2.x86_64
os.cpus().length
2
next/headers - headers().get('x-forwarded-for')
172.71.255.140
next/headers - headers().get('user-agent')
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
next/headers - headers().get('host')
rsc.xn--pckua0m.xn--tckwe
next/headers - headers().get('accept-language')
-
next/cookies - cookies().get('test')
Cookie not found
next/navigation - usePathname()
-
next/navigation - useSearchParams()
-
next/navigation - useParams()
-
process.env.NEXT_RUNTIME
nodejs
process.env.NEXT_PUBLIC_VERCEL_ENV
production
process.env.NEXT_PUBLIC_VERCEL_TARGET_ENV
production
process.env.NEXT_PUBLIC_VERCEL_URL
rsc-lmrapbxmx-kurisus-projects-6be1687d.vercel.app
process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
rsc-git-main-kurisus-projects-6be1687d.vercel.app
process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
rsc.xn--pckua0m.xn--tckwe
process.env.NEXT_PUBLIC_VERCEL_GIT_PROVIDER
github
process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG
rsc
process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER
kurisu-dotto-komu
process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_ID
958866517
process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF
main
process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
5e788d75de5041bee8b4e81b62f2013ee3e40202
process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE
Typos
process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_LOGIN
kurisu-dotto-komu
process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_AUTHOR_NAME
クリス.コム
process.env.NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID
process.env.VERCEL
1
process.env.CI
-
process.env.VERCEL_ENV
production
process.env.VERCEL_TARGET_ENV
production
process.env.VERCEL_URL
rsc-lmrapbxmx-kurisus-projects-6be1687d.vercel.app
process.env.VERCEL_BRANCH_URL
rsc-git-main-kurisus-projects-6be1687d.vercel.app
process.env.VERCEL_PROJECT_PRODUCTION_URL
rsc.xn--pckua0m.xn--tckwe
process.env.VERCEL_REGION
iad1
process.env.VERCEL_DEPLOYMENT_ID
dpl_EhusWUpwp7QZHRnTp9rxa3Lq7esm
process.env.VERCEL_PROJECT_ID
prj_hhk7ojmXUzUUGph3ddAieSboTgwL
process.env.VERCEL_SKEW_PROTECTION_ENABLED
-
process.env.VERCEL_AUTOMATION_BYPASS_SECRET
-
process.env.VERCEL_OIDC_TOKEN
-
process.env.VERCEL_GIT_PROVIDER
github
process.env.VERCEL_GIT_REPO_SLUG
rsc
process.env.VERCEL_GIT_REPO_OWNER
kurisu-dotto-komu
process.env.VERCEL_GIT_REPO_ID
958866517
process.env.VERCEL_GIT_COMMIT_REF
main
process.env.VERCEL_GIT_COMMIT_SHA
5e788d75de5041bee8b4e81b62f2013ee3e40202
process.env.VERCEL_GIT_COMMIT_MESSAGE
Typos
process.env.VERCEL_GIT_COMMIT_AUTHOR_LOGIN
kurisu-dotto-komu
process.env.VERCEL_GIT_COMMIT_AUTHOR_NAME
クリス.コム
process.env.VERCEL_GIT_PREVIOUS_SHA
process.env.VERCEL_GIT_PULL_REQUEST_ID
client
node.js

Remember, Shared Components will inherit whichever environment they are imported into, but this shouldn't really make a difference if they are written to be environment agnostic, as they should be.

Next, let's explore how boundaries work between server and client components.
KindsBoundaries