Browser-only library in App Router: how do you use it without breaking SSR/Server Components?

Deep dive

Expanding on the short answer — what usually matters in practice:

• Context (tags): nextjs, server-components, client-components, dynamic-import
• Lifecycle: what happens at runtime (render/build, request/response, background jobs).
• Caching: where cache lives, cache keys, how to invalidate without chaos.
• Security: authn/authz, secrets, attack surface (SSRF/CSRF).
• Explain the "why", not just the "what" (intuition + consequences).
• Trade-offs: what you gain/lose (time, memory, complexity, risk).
• Edge cases: empty inputs, large inputs, invalid inputs, concurrency.

Examples

A tiny example (an explanation template):

// Example: discuss trade-offs for "browser-only-library-in-app-router:-how-do-you-u"
function explain() {
  // Start from the core idea:
  // Keep the browser-only code in a Client Component (`'use client'`). If the library touches 
}

Common pitfalls

• Too generic: no concrete trade-offs or examples.
• Mixing average-case and worst-case (e.g., complexity).
• Ignoring constraints: memory, concurrency, network/disk costs.

Interview follow-ups

• When would you choose an alternative and why?
• What production issues show up and how do you diagnose them?
• How would you test edge cases?