Blog

Designing for Speed: Shipping Static Experiences that Feel Instant

Lessons from building a statically generated portfolio that feels handcrafted yet performs like a native app.

Akshai Krishnan

Software Engineer

Sep 18, 2024 · 2 min read

next.js
performance
ux

Speed is a feature. Over the last few months I have been tuning this portfolio to render statically while still handling dynamic data, dark mode, and delightful interactions. The end result feels instant because every decision favours predictability.

tsx

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    slug: post.meta.slug,
  }));
}

The guiding principles:

Model content up-front so layouts stay stable.
Prefer build-time work over runtime branching.
Push assets to the edge and keep them small.

There is no single hack. It is a series of thoughtful trade-offs that add up to a fast narrative.

With this release I automated content pipelines, trimmed bundle weight, and embedded structured data so search engines understand the story. The stack is modern, but the ethos is classic: ship something fast, accessible, and human.

mermaid

flowchart TD
    subgraph Dev["Repo & CI"]
      GH[GitHub/GitLab/Bitbucket]
      VC[vercel.json / Project Settings]
      GH -->|git push| VB[Vercel Build]
      VB -->|App Router build / SWC| AO[Artifacts: Static files, Serverless funcs, Edge funcs]
    end

    subgraph Vercel["Vercel Platform"]
      DIR[Smart Routing & Domains]
      EDGE[Vercel Edge Network (CDN+PoPs)]
      CACH[Edge Cache]
      LOGS[Observability (Logs/Analytics)]
      AO --> DEP[Deployment (Preview / Production)]
      DEP --> DIR
      DIR --> EDGE
      EDGE --> CACH
    end

    subgraph Next["Next.js Runtime (on Vercel)"]
      MW[Middleware (Edge)]
      EF[Edge Functions]
      SF[Serverless Functions (Node)]
      STA[Static Assets (_next/static, public/)]
      ISR[ISR Cache (revalidate)]
      IMG[Image Optimization]
      RSC[React Server Components]
      API[App Router (routes/, API, layouts)]
    end

    subgraph Data["Data & Integrations"]
      KV[Vercel KV / Redis]
      DB[SQL/NoSQL (e.g., Postgres, MongoDB)]
      BLOB[Vercel Blob / S3]
      EXT[External APIs]
    end

    U[User (Browser/App)] -->|HTTPS| EDGE
    EDGE -->|check cache| CACH
    CACH -- miss --> MW
    MW -->|rewrite/redirect/auth| DIR

    DIR -->|/static| STA
    DIR -->|/api/*| SF
    DIR -->|edge routes / middleware| EF
    DIR -->|page render| RSC

    SF --> DB & KV & BLOB & EXT
    EF --> KV & EXT

    SF --> ISR
    RSC --> ISR
    ISR --> CACH

    STA --> EDGE
    IMG --> EDGE

    EDGE -->|cached response| U
    SF --> LOGS
    EF --> LOGS