Server-only modules in NextJS - Performance & Optimization

Performance: Server-only modules

HIGH IMPACT

This concept affects the bundle size sent to the browser and the initial page load speed by keeping server-only code out of client bundles.

Importing server-only code in a Next.js component

NextJS

import { readFile } from './server-utils';

export const dynamic = 'force-dynamic';

export default async function Page() {
  const data = await readFile('/data.txt');
  return <div>{data}</div>;
}

// server-utils.js
export async function readFile(path) {
  const fs = await import('fs/promises');
  return fs.readFile(path, 'utf-8');
}

Server-only code stays on the server, never bundled for the client, reducing client bundle size and improving load speed.

📈 Performance GainSaves 200kb+ in client bundle, reduces LCP by 300-500ms, no client errors

Importing server-only code in a Next.js component

NextJS

import fs from 'fs';

export default function Page() {
  const data = fs.readFileSync('/data.txt', 'utf-8');
  return <div>{data}</div>;
}

This imports a Node.js server-only module into a client component, causing the bundler to include it in the client bundle, increasing size and causing errors.

📉 Performance CostAdds 200kb+ to client bundle, blocking rendering and increasing LCP by 300-500ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Import server-only modules in client code	N/A	N/A	High due to large bundle and blocking parse	[X] Bad
Use server-only modules in server components or server actions	N/A	N/A	Low bundle size, fast parse	[OK] Good

Rendering Pipeline

Server-only modules run on the server during rendering and data fetching. They do not enter the client bundle, so the browser downloads less code, leading to faster parsing and rendering.

→Bundle Generation

→Network Transfer

→Parsing & Execution

→Rendering

⚠️ BottleneckBundle Generation and Network Transfer due to large client bundles

Core Web Vital Affected

LCP

This concept affects the bundle size sent to the browser and the initial page load speed by keeping server-only code out of client bundles.

Optimization Tips

1Never import Node.js-only modules in client components.

2Use Next.js server components or server actions for server-only logic.

3Check client bundle size to ensure server-only code is excluded.

Performance Quiz - 3 Questions

What is the main performance benefit of using server-only modules in Next.js?

A They reduce client bundle size and improve page load speed

B They increase client bundle size for better caching

C They improve CSS rendering speed

D They reduce server CPU usage

DevTools: Network and Performance panels

How to check: Open DevTools Network tab, filter by JS files, check bundle sizes. Use Performance tab to record page load and check LCP timings.

What to look for: Look for large JS bundles including server-only modules and long LCP times indicating slow loading.

Practice

1. What is the main purpose of server-only modules in Next.js?

easy

A. To enable server code to be bundled with client JavaScript

B. To run code on both server and client for faster rendering

C. To allow client-side code to access server secrets directly

D. To run code only on the server and keep it hidden from the browser

Solution

1. Step 1: Understand server-only module purpose

   Server-only modules run exclusively on the server and are not sent to the browser.

2. Step 2: Identify security benefit

   This keeps secrets safe and improves app security by hiding sensitive code from clients.

3. Final Answer:

   To run code only on the server and keep it hidden from the browser -> Option D

4. Quick Check:

   Server-only modules hide code from browser = A [OK]

Hint: Server-only means code runs only on server, hidden from browser [OK]

Common Mistakes:

• Thinking server-only modules run on client too
• Assuming server-only modules expose secrets to browser
• Confusing server-only with shared server-client code

2. Which line correctly marks a Next.js module as server-only?

easy

A. export const client = true;

B. export const runtime = 'edge';

C. import 'server-only';

D. export default function ServerOnly() {}

Solution

1. Step 1: Recall server-only marking syntax

   Next.js uses import 'server-only'; to mark server-only modules.

2. Step 2: Compare options

   import 'server-only'; matches the correct syntax; others either mark edge runtime or client code.

3. Final Answer:

   import 'server-only'; -> Option C

4. Quick Check:

   Server-only marker = import 'server-only' [OK]

Hint: Look for import 'server-only' to mark server-only [OK]

Common Mistakes:

• Using 'edge' runtime which is for edge functions, not server-only
• Confusing client export with server-only marking
• Missing the import keyword

3. Given this server-only module code in Next.js, what will happen if you try to import it in a client component?

import 'server-only';

export function secretData() {
  return 'top-secret';
}

medium

A. The client component will fail to compile with an error

B. The client component will receive the secret data as a string

C. The secretData function will run on the client without errors

D. The secretData function will be bundled into client JavaScript

Solution

1. Step 1: Understand server-only import restrictions

   Server-only modules cannot be imported into client components; Next.js blocks this to protect secrets.

2. Step 2: Predict behavior on import

   Trying to import causes a compile-time error because the module is not allowed in client code.

3. Final Answer:

   The client component will fail to compile with an error -> Option A

4. Quick Check:

   Importing server-only in client causes error = D [OK]

Hint: Server-only modules cannot be imported by client components [OK]

Common Mistakes:

• Assuming server-only code runs on client
• Thinking secret data is exposed to client
• Believing server-only modules are bundled with client code

4. You wrote this server-only module but get an error when running your Next.js app:

export function getSecret() {
  return 'hidden';
}

What is missing to make this module server-only?

medium

A. You need to add import 'server-only'; at the top

B. You must rename the function to start with 'server'

C. You should import React in this module

D. You need to export the function as default

Solution

1. Step 1: Identify server-only module requirement

   Next.js requires import 'server-only'; to mark a module as server-only.

2. Step 2: Check given code

   The code lacks this import, so Next.js treats it as shared or client code, causing errors if used improperly.

3. Final Answer:

   You need to add import 'server-only'; at the top -> Option A

4. Quick Check:

   Missing 'server-only' import causes error = A [OK]

Hint: Always add import 'server-only'; to mark server-only [OK]

Common Mistakes:

• Thinking function name controls server-only status
• Assuming React import is needed for server-only modules
• Believing default export affects server-only behavior

5. You want to fetch a secret API key only on the server in Next.js and prevent it from being sent to the client. Which approach correctly uses server-only modules to achieve this?

// secret.js
import 'server-only';
export function getApiKey() {
  return process.env.API_KEY;
}

// page.jsx
'use client';
import { getApiKey } from './secret';

export default function Page() {
  const key = getApiKey();
  return <p>API Key: {key}</p>;
}

hard

A. This code will cause an error because getApiKey is called in a client component

B. You should move getApiKey call inside a server component or server action

C. This code works and safely shows the API key on the client

D. You must export getApiKey as default to work

Solution

1. Step 1: Understand server-only module usage

   Server-only modules cannot be imported or called directly in client components without error.

2. Step 2: Analyze the code

   The page.jsx is a client component calling getApiKey(), which is server-only, causing an error.

3. Step 3: Correct approach

   Call getApiKey() inside a server component or server action to keep the secret on the server.

4. Final Answer:

   You should move getApiKey call inside a server component or server action -> Option B

5. Quick Check:

   Server-only calls must be inside server components = B [OK]

Hint: Call server-only functions only inside server components or actions [OK]

Common Mistakes:

• Calling server-only functions directly in client components
• Exposing secrets by rendering them in client JSX
• Assuming default export fixes server-only usage