[Part 1] Client-Side vs Server-Side — The Full Picture

Real examples are pulled from this TypeLyrics codebase.

The core idea in one sentence

Server-side means code runs on a computer you own/rent before the user sees anything. Client-side means code runs inside the user's browser after they receive the page.

1. Where does code actually run?

YOUR SERVER                          USER'S BROWSER
(Vercel / Node.js)                   (Chrome / Safari / Firefox)
─────────────────────                ─────────────────────────────
Has access to:                       Has access to:
  • Your database                      • The DOM (buttons, inputs)
  • Secret API keys                    • localStorage / cookies
  • File system                        • window, document
  • Other servers                      • User's mouse / keyboard
  • Full Node.js runtime               • User's device hardware
 
Cannot access:                       Cannot access:
  • User's browser                     • Your database directly
  • User's localStorage                • Secret API keys
  • User's device                      • Other users' data

2. The journey of a page load

When someone visits typelyrics.de/train this is what happens step by step:

[Part 1] Client-Side vs Server-Side — The Full Picture

The core idea in one sentence

1. Where does code actually run?

2. The journey of a page load

3. Server Components vs Client Components (Next.js App Router)

Server Component — no `'use client'` at top

Client Component — has `'use client'` at top

The key rule: Server Components can import Client Components, but not the other way around

4. `useEffect` — the gateway to client-side code

The three forms

Real example from this project — lazy lyrics fetch

The core idea in one sentence

1. Where does code actually run?

2. The journey of a page load

3. Server Components vs Client Components (Next.js App Router)

Server Component — no 'use client' at top

Client Component — has 'use client' at top

The key rule: Server Components can import Client Components, but not the other way around

4. useEffect — the gateway to client-side code

The three forms

Real example from this project — lazy lyrics fetch

Server Component — no `'use client'` at top

Client Component — has `'use client'` at top

4. `useEffect` — the gateway to client-side code