❓ Why Doesn’t Server-Side Rendering (SSR) Have Access to localStorage?

The key reason is simple:

localStorage is a browser API — and SSR happens on the server, not in the browser.

Let’s understand this more deeply 👇

---

🧠 What is localStorage?

• localStorage is part of the Web Storage API.

• It exists only in the browser (i.e., on the client-side).

• It’s used to store data like preferences, tokens, or cart items between page reloads.

localStorage.setItem('theme', 'dark');

This code only runs in the browser, because the browser provides window.localStorage.

---

🖥️ What Happens During Server-Side Rendering?

When using Server Components or SSR, the page is rendered on the server (like a Node.js process).

There is:

• ❌ No window

• ❌ No document

• ❌ No localStorage

• ❌ No DOM

The server has no idea about your user's browser or storage, because the code runs before the browser even receives the page.

---

💥 So What If You Try to Use localStorage on the Server?

You’ll get an error like:

ReferenceError: localStorage is not defined

Because it doesn’t exist in that environment — just like you can’t use document.querySelector() on the server either.

---

🧩 So How Can You Use localStorage in a Next.js App?

You have two options:

✅ Option 1: Use a Client Component

Only access localStorage inside a component that runs in the browser.

'use client';

import { useEffect } from 'react';

export default function ThemeLoader() {
  useEffect(() => {
    const theme = localStorage.getItem('theme');
    console.log(theme);
  }, []);

  return null;
}

✅ Runs safely in the browser
✅ Can access localStorage freely

---

✅ Option 2: Hydrate Server Data With Client Code

If you fetch some data on the server and want to enhance it using browser info like localStorage, you:

1. Render the base page on the server

2. Then use a client-side component to pull in additional context (like auth tokens, preferences, etc.)

---

🧠 Final Analogy

Think of localStorage like your browser’s notebook.
When the server is drawing your page, it doesn’t have access to your notebook — it’s on a different machine.
Only once the page reaches your browser, your notebook becomes visible and usable.

---

✅ Summary