About this article
Thank you for visiting this site. This article is a guide listing all 9 articles in the “Frontend Architecture” category of the Architecture Crash Course for the Generative-AI Era series.
The frontend is the only layer the user touches. No matter how robust the backend is, if the frontend is slow, hard to use, or insecure, the service’s value doesn’t get through. This category covers every architectural decision on the frontend — from rendering strategies to CSS design, authentication, and SEO.
Article index
1. Frontend Architecture Overview — The Only Layer the User Touches
Clarifies why the frontend deserves its own architectural treatment. Covers a rendering-strategy taxonomy, major frameworks, and a per-page-type configuration ladder. Read this first as the map of the entire category.
2. Hosting — CDN / Edge / Static First
Explains the differences between CDN, static hosting, and edge computing, and how to choose. Covers cache strategy, image optimization, and Core Web Vitals through the two core principles of “Static First” and “Git push = production deploy.”
3. Rendering Strategies — CSR / SSR / SSG / ISR
Compares the four major rendering strategies — CSR, SSR, SSG, ISR — plus modern techniques like Hydration, Islands Architecture, Streaming SSR, and React Server Components. Understand the modern best practice of mixing strategies on a per-page basis.
4. State Management — useState / Zustand / TanStack Query
Classifies state into five kinds (UI, domain, server, URL, persistent) and maps each to the optimal library. Learn the 2026 modern default stack: Zustand, TanStack Query, React Hook Form + Zod, and more.
5. Framework Deep Dive — React / Vue / Svelte / Next.js / Astro
Compares React, Vue, Svelte, and Astro as UI libraries, and Next.js, Nuxt, and SvelteKit as meta-frameworks. Covers use-case fit, talent availability, and AI-era generation accuracy — a comprehensive framework selection guide.
6. CSS Design — Tailwind / CSS Modules / Design Token
Compares Tailwind, CSS Modules, and CSS-in-JS; covers design systems, Design Tokens, and accessibility. Learn the AI-era power trio: “Tailwind + shadcn/ui + Design Tokens.”
7. BFF Design — Keep the Backend For Frontend Thin
Covers BFF background, typical responsibilities, implementation patterns (Next.js/tRPC/Hono), and how it differs from GraphQL. Learn the iron rule of “keep it thin; introduce it only when needed” and how to avoid the anti-pattern of BFF bloat.
8. Auth in the Browser — Security Architecture Assuming F12
Covers browser-specific XSS/CSRF countermeasures, Cookie attributes, CSP, token storage, and Refresh Token Rotation. Understand the minefield of frontend auth design under the assumption that everything is visible in the browser’s DevTools (F12).
9. SEO Design — Rendering, Meta, and Structured Data in Concert
Covers the relationship between rendering strategies and SEO, meta tags, auto-generated OG images, JSON-LD, sitemaps, URL design, i18n, and Core Web Vitals — a comprehensive tour of the SEO foundations to embed in the initial design.
Summary
This article listed all 9 articles in the Frontend Architecture category of the Architecture Crash Course for the Generative-AI Era series.
The frontend directly affects user experience, so the range of considerations — rendering strategies, state management, SEO, security — is wide. Get the big picture from the overview, then start with the article closest to your area of responsibility.
For the overall series structure and other categories, see the master series index.
Hope you’ll check out the next article as well.