Architecture at a Glance

static.bio is built as two almost-separate applications with different constraints and runtime behavior. This separation ensures public pages remain lightweight while the dashboard can use modern tooling.

Two Halves

Public Profiles

Public profiles are served from Edge Runtime with zero JavaScript:

  • Pure HTML + CSS output
  • Zero JavaScript (no <script> tags)
  • Edge Runtime (production) for sub-10ms cold starts
  • Framework-agnostic renderer (@static-bio/render)
  • No React, no hydration, no client-side code

Dashboard

The dashboard is a standard Next.js app for authenticated creators:

  • Next.js + React + Tailwind
  • Server components with client interactivity
  • Auth-protected at the proxy level
  • Used only by logged-in creators to manage profiles and billing

Request Lifecycle

When a visitor requests a public profile, here's what happens:

1. Incoming Request

Request arrives at /{username} or a custom domain like links.janedoe.com.

  • proxy.ts rewrites /{username} → /api/profile/{username}
  • For custom domains, proxy.ts resolves hostname → profileId via database lookup

2. Fast Routing

The API route handler at /api/profile/[username]/route.ts executes:

  • Extracts username from route params
  • Validates username format (alphanumeric + hyphens/underscores)
  • Fast path: reserved paths (dashboard, api, docs, etc.) skip profile lookup

3. Single Database Query

One optimized SQL query fetches profile + links:

SELECT 
  p.id, p.username, p."displayName", p.bio, p."avatarUrl", 
  p."themeId", p."analyticsEnabled", p.plan,
  COALESCE(
    json_agg(...) FILTER (WHERE l.enabled = true),
    '[]'::json
  ) as links
FROM "Profile" p
LEFT JOIN "Link" l ON l."profileId" = p.id
WHERE p.username = $1
GROUP BY p.id

This single query replaces what would typically be 2+ queries (profile lookup + links fetch). Query time: ~10-20ms.

4. Renderer

Profile data is passed to the renderer library:

const { html, meta } = renderProfilePage({
  profile: { ... },
  links: [ ... ],
  options: {
    environment: "production",
    baseUrl: "https://static.bio",
    trackingBaseUrl: "https://static.bio/r",
    showBrandingFooter: profile.plan === "FREE",
  },
});

The renderer is a pure function: no database access, no network calls, no environment reads. It returns a complete HTML document with inline CSS.

5. Edge Response

The API route returns HTML with security headers:

  • Content-Type: text/html; charset=utf-8
  • X-Frame-Options: DENY
  • X-Content-Type-Options: nosniff
  • No cookies, no Set-Cookie header

Data Model

The database schema is intentionally simple:

Core Tables

  • Profile: username, displayName, bio, avatarUrl, themeId, analyticsEnabled, plan
  • Link: label, url, enabled, order (sorted by order, filtered by enabled)
  • CustomDomain: hostname, verified status, profileId mapping
  • Analytics events: click tracking (Lifetime plan only), aggregated per link

Platform vs. Our Code

Understanding what we control vs. what the platform provides is important for evaluating portability. See Platform vs Custom for a detailed breakdown.

In short:

  • We control: Renderer library, API route design, SQL queries, HTML/CSS output, performance tests, privacy rules
  • Platform provides: Edge runtime, CDN/POPs, HTTP/2, TLS termination, Brotli compression