Isomorphic code is code that runs on both the server and in the browser. It works the same way on either side because it doesn't depend on anything that only exists in one place.
Think of a theater. Some things only work backstage — the lighting board, the trap doors. But a chair works on stage and backstage. No wiring needed, no special setup.
Isomorphic code is the chair. A function like isAdmin(user) just checks a property on an object — that works in a loader (server) and in a React component (browser). A function like requireAdmin(request) reads the session cookie and talks to the database — that's backstage-only.
The rule is simple: if the code doesn't touch the database, doesn't read secrets, and doesn't use server-only APIs, it can run anywhere. Type checks, property lookups, string formatting, math — all isomorphic.
The moment code imports a database connection or reads an environment variable that only exists on the server, it's server-only.
Two patterns side by side:
app/models/ (no .server) — isomorphic helpers. Type checks, predicates, formatters. Safe for both sides.app/models/.server/ — database operations. Queries, mutations, anything that needs the db connection.The import path tells you which is which. No .server in the path means the code works everywhere.