Bài này là vòng system-design frontend 45 phút, không phải quiz cây thư mục. Người phỏng vấn xem bạn làm rõ product, chọn SPA vs SSR vs hybrid, vẽ hộp kèm kịch bản lỗi, đặt cache và invalidation, và nêu rõ a11y, auth, và rollout. Vue/Nuxt trước; Next cùng ý hybrid với RSC.

Đọc 16.1 trước (khung nói và whiteboard). 16.2 là tầng cache và invalidation: câu nối tiếp thường gặp. 16.3 là component library như một product. 16.4 và 16.5 là ví dụ làm sẵn: dashboard nội bộ, rồi hybrid marketing + app traffic cao. Thư mục thuộc 15.5; chúng không phải kiến trúc.

Tóm tắt: Câu trả lời system-design frontend là khung nói: làm rõ yêu cầu, nêu component, đặt data và state, rồi hiệu năng, rồi a11y/bảo mật, rồi rollout. Thư mục không phải kiến trúc (đó là 15.5). SPA vs SSR vs hybrid là quyết định product, không phải mặc định.

Vì sao quan trọng: Bốn mươi lăm phút. Junior vẽ cây thư mục. Senior làm rõ user, SEO, realtime, region, auth, scale, team/deploy, offline, SLA, rồi chọn SPA vs SSR vs SSG/ISR vs rule hybrid theo route. SSR một dashboard đã auth mà không cần SEO, hoặc micro-frontend cho sáu người, là tín hiệu.

1. Cách hoạt động: 1. Yêu cầu. User, SEO, realtime, region, auth, scale, lịch team/deploy, offline, SLA. Nói to hai phút trước khi vẽ.
2. 2. Component (hộp). CDN/edge, HTML (Nuxt/Nitro hoặc static), JS/CSS đã hash, BFF /api, API product, auth/session, WS/SSE tùy chọn, flag service. Mỗi hộp một kịch bản lỗi: HTML CDN cũ, BFF timeout, WS rớt, flag down, JS 404 sau deploy.
3. 3. Data và state. URL cho filter share được. Query cache cho data server. Pinia cho UX client. 4. Hiệu năng. LCP/INP, TTFB, điện thoại tầm trung ở region tệ nhất. 5. A11y và bảo mật. Bàn phím, authz trên server, cookie không nằm trên HTML cache được. 6. Rollout. Flag, thời gian rollback, error budget.
4. Mặc định một app. Đừng chọn micro-frontend trừ khi họ buộc ràng buộc team/deploy (15.4). Dashboard thì gần như luôn cần BFF. Next App Router: RSC cho content, client cho widget dashboard, cùng ý hybrid. Hydration mismatch từ Date.now(), flag, window là hộp bạn nêu rõ.

[User] → [CDN / edge] → [HTML: Nuxt/Nitro hoặc static]
                         ├─ JS/CSS đã hash (immutable)
                         ├─ BFF (cùng origin /api)
                         │    ├─ API product
                         │    ├─ auth / session
                         │    └─ DTO gộp
                         ├─ WS/SSE gateway (tùy chọn)
                         └─ flag service (timeout ngắn, fail-safe)
       Browser cache ← → Service worker (tùy chọn, chủ yếu static)
Kịch bản lỗi cần nêu: HTML cũ, BFF timeout, WS rớt, flag down, JS 404 sau deploy
Không phải kiến trúc: app/features/orders/components/  ← đó là 15.5

Điều gì xảy ra: Whiteboard là hộp và seam, không phải thư mục. Mỗi hộp có một kịch bản lỗi. Cây thư mục là bằng chứng mười dòng bạn đã ship Vue, rồi bạn chuyển sang ranh giới, SLA, và rollback.

Lỗi hay gặp

• Triệu chứng: cây thư mục là cả câu trả lời. Nguyên nhân: bỏ hộp. Cách xử lý: khung sáu bước, rồi 15.5.
• Triệu chứng: SSR dashboard đã login. Nguyên nhân: SSR thành mặc định. Cách xử lý: cần SEO/LCP, không thì CSR + BFF.
• Triệu chứng: micro-frontend cho sáu người. Nguyên nhân: theo mốt. Cách xử lý: một app, package (15.4).
• Triệu chứng: chỉ happy path. Nguyên nhân: không có kịch bản lỗi. Cách xử lý: một lỗi mỗi hộp, nói ra miệng.

Tóm tắt: Cache ở tầng ngoài cùng còn an toàn. Invalidation mới là câu phỏng vấn. Static đã hash sống mãi (immutable). HTML và JSON nhận TTL kèm tag. HTML cá nhân hóa không bao giờ public. localStorage giữ preference và bản nháp, không phải token auth.

Vì sao quan trọng: “Bạn cache thế nào?” Junior liệt kê localStorage. Senior nói tầng và invalidation: “user đổi avatar, cache nào còn hiện cái cũ?” Ai cũng gán được max-age. Thiếu cache key là bug bảo mật (Cache-Control: public trên /api/me).

1. Cách hoạt động: HTTP browser cho /_nuxt đã hash immutable và một ít JSON GET public. Memory / TanStack Query cho data màn hình, có key, invalidateQueries sau mutation. localStorage / IDB cho preference và bản nháp, có version, xóa lúc logout, không bao giờ token. CDN / edge cho HTML, JSON public, ảnh, purge bằng surrogate key. Origin / BFF (Nitro, Redis) cho payload SSR và bản gộp: tag theo entity, đừng cache kép mù.
2. Pattern invalidation cần nêu rõ: (1) Hash tên file: cache tốt nhất; HTML không được sống lâu bằng JS. (2) TTL cho “đủ tốt”; ETag / If-None-Match cho polling rẻ. (3) Surrogate-Key / cache tag: purge mọi thứ gắn product:9 hoặc user:9. (4) Purge theo event lúc publish. Key cache (locale, auth), không thì là bug bảo mật. Service worker precache asset đã hash và network-first cho HTML, có kill switch: đừng cache HTML mãi trên SaaS ship hằng ngày.
3. GraphQL ở CDN: hash theo query hoặc TTL ngắn; POST khó cache. Nuxt: key useAsyncData, cachedEventHandler, routeRules. Next 15: fetch mặc định không cache; revalidateTag / revalidatePath sau mutation. Hard refresh không phải strategy invalidation.

// Avatar đổi: xử lý mọi tầng còn có thể hiện cái cũ.
await fetch("/api/me/avatar", { method: "POST", body })
queryClient.invalidateQueries({ queryKey: ["me"] }) // memory / TanStack Query
// CDN: PURGE /cdn-cgi/tags/user:9  (surrogate-key): không phải hard refresh
// HTML cho /app là no-store; /_nuxt/avatar-hash.js đã hash là immutable
localStorage.removeItem("draft:profile") // không bao giờ để token ở đây
// Next 15: revalidateTag("user-9") sau Server Action
// SW: network-first cho HTML; header kill switch bỏ qua precache

Điều gì xảy ra: Mutation invalidate query, purge tag CDN, và để asset đã hash yên. Token không bao giờ nằm trong localStorage. Hard refresh không có trong list.

Lỗi hay gặp

• Triệu chứng: /api/me trả về nhầm user. Nguyên nhân: public không có key auth. Cách xử lý: private / no-store.
• Triệu chứng: avatar cũ sau save. Nguyên nhân: chỉ mutate memory. Cách xử lý: query + tag CDN.
• Triệu chứng: index.html một năm tuổi từ SW. Nguyên nhân: precache HTML. Cách xử lý: HTML network-first + kill switch.
• Triệu chứng: “cứ hard refresh”. Nguyên nhân: không có câu chuyện invalidation. Cách xử lý: hash, TTL, tag, event.

Tóm tắt: Component library là một product: token, primitive accessible, package có version với peer vue, và ownership. Widget domain ở lại trong app (15.6). Bốn team không cần bốn Button. Padding đẩy layout là major.

Vì sao quan trọng: “Thiết kế component library cho bốn product team”. Họ muốn token, primitive APG, semver, và một guild, không phải Storybook đẹp. Hex trong mọi SFC, “button” icon không phải <button>, và major bump mỗi tháng là các kịch bản lỗi.

1. Cách hoạt động: Biến CSS với tên semantic (--color-danger). Dark mode đổi token; class trên <html> lấy từ cookie để tránh nháy. Bàn phím, focus trap, pattern listbox, contrast trên token. exports map, entrypoint theo component, sideEffects cho CSS. RFC cho primitive mới; request riêng của app nhận lời không kèm cách compose.
2. Styled + token nhanh hơn cho một brand; headless nếu brand lệch mạnh. Bắt đầu mono, tách @acme/ui-button nếu build đau. App ghim semver; Renovate; đừng workspace:* mãi khi lịch deploy đã tách. Dark-launch ButtonNext hoặc flag trong package. Visual regression: Playwright/Chromatic, token làm fixture.
3. DS React + Vue: share token, primitive native mỗi framework. Đừng bọc Vue trong React. Storybook không được là runtime duy nhất; Nuxt SSR phải pass. Topic này là thiết kế 45 phút; 15.6 là đường cắt ownership so với component app.

// packages/ui/src/button/index.ts: entry theo component, peer vue
export { default as UiButton } from "./UiButton.vue"
export type { UiButtonProps } from "./UiButton.vue"
// package.json: "exports": { "./button": "./src/button/index.ts" }
// "peerDependencies": { "vue": "^3.5" }, "sideEffects": ["**/*.css"]
export const tokens = {
  "--color-danger": "oklch(0.6 0.2 25)", // semantic; dark mode đổi value
}
// Đổi visual đẩy padding → major. orderId domain → từ chối, xem 15.6.

Điều gì xảy ra: App import @acme/ui/button, không phải barrel của tất cả. Vue ở lại peer. Token là semantic. Đẩy padding là major bạn ghi changelog.

Lỗi hay gặp

• Triệu chứng: hex trong mọi SFC. Nguyên nhân: không có token. Cách xử lý: biến CSS semantic, dark mode là một lần swap.
• Triệu chứng: major mỗi tháng. Nguyên nhân: không kỷ luật semver. Cách xử lý: visual break = major; phần thêm đứng sau flag.
• Triệu chứng: fail Nuxt SSR. Nguyên nhân: window chỉ có trên Storybook. Cách xử lý: story SSR.
• Triệu chứng: bốn team, bốn Button. Nguyên nhân: không có owner. Cách xử lý: một package, một guild, một roadmap.

Tóm tắt: Dashboard analytics / ops là nặng CSR, một DTO dashboard BFF (hoặc gọi widget trong budget), filter trên URL, hàng đã virtualize, permission trên server, và error boundary mỗi widget. Dùng khung sáu bước 16.1, nói to.

Vì sao quan trọng: Đây là dàn bài 45 phút đã làm sẵn. Bẫy: mười hai waterfall từ browser, filter chỉ trong Pinia (không share được, nút back gãy), 50k hàng DOM, giấu nút mà để lại endpoint, một chart throw làm trắng cả app.

1. Cách hoạt động: Yêu cầu. User nội bộ, live cỡ nào, số hàng, export, đa region, saved view. SEO yếu → Nuxt nặng CSR, chart sau <ClientOnly>. Hộp. BFF GET /bff/dashboard (hoặc widget song song với timeout gateway). Permission bị strip trên server; giấu cột chỉ là UX.
2. Data/state. ?from=&to=&status=&q= là nguồn sự thật. Saved view là resource phía server (?view=id). Cursor thường không nằm trên URL với grid infinite; page index dành cho table phân trang. Hiệu năng. Virtualize table; downsample chart trong BFF. Mặc định poll 30s + ETag; SSE cho badge; WS chỉ khi người ta sửa queue.
3. A11y/bảo mật. Authz trên server; export CSV qua endpoint có log, không lấy từ DOM. Secret không nằm trên URL. Rollout. Flag cho widget mới; timeout mỗi widget; last-good + marker stale. Tách vendor chart. Để ý timezone (Z khác local) và chart-lib leak lúc unmount.

// Filter trên URL để support share được view. Không chỉ Pinia.
const from = useRouteQuery("from", "7d")
const status = useRouteQuery("status", "open")
const { data, pending, error, refresh } = await useAsyncData(
  () => `dash:${from.value}:${status.value}`,
  () => $fetch("/bff/dashboard", { query: { from: from.value, status: status.value } }),
)
// Mỗi widget: boundary riêng + timeout. Table virtualize ở client.
// Cột ẩn ≠ thiếu field: BFF đã strip billing cho role này.

Điều gì xảy ra: Support dán URL và thấy cùng một lát. BFF chịu trách nhiệm authz. Widget fail độc lập. Pinia không giữ filter.

Lỗi hay gặp

• Triệu chứng: view không share được, nút back gãy. Nguyên nhân: filter chỉ trong Pinia. Cách xử lý: URL là nguồn sự thật.
• Triệu chứng: màn trắng. Nguyên nhân: một chart throw. Cách xử lý: boundary mỗi widget.
• Triệu chứng: 50k hàng DOM, INP chết. Nguyên nhân: không virtualize. Cách xử lý: virtualize + downsample BFF.
• Triệu chứng: nút ẩn, endpoint mở. Nguyên nhân: authz chỉ ở UI. Cách xử lý: strip trên server.

Tóm tắt: Một app Nuxt hoặc Next, một design system, hai profile runtime: content public ở CDN (SSG/ISR, purge lúc publish), /app/** sau auth là no-store. Tách deploy chỉ khi lịch release của team đòi vậy. Request homepage không có cookie user.

Vì sao quan trọng: “Site marketing và product đã login. Một codebase hay hai? Nuxt hay Next?” Một Cache-Control global thì hoặc rò first name, hoặc giết SEO. SSR cả app đã login lúc Super Bowl ad là tín hiệu kia. Vary: Cookie trên / đẩy hit ratio về ~0.

1. Cách hoạt động: Marketing: SSG/ISR/SSR cache cao, purge lúc publish. /app/**: HTML no-store, shell + client, BFF /api. Cookie auth host-only hoặc theo path, không bao giờ trên trang cache được. Homepage ẩn danh: cá nhân hóa sau paint. JS marketing nhỏ; đừng tải dashboard trên /. Kill switch chiến dịch ở edge.
2. Đánh đổi. Subdomain app. cô lập cookie/cache; path /app gọn link và một origin CSP. Chọn cô lập khi incident cache làm bạn sợ. ISR 30s khác purge on-demand: purge lúc publish, TTL làm lưới an toàn. Hai framework chỉ khi đã có hai org. A/B hero bằng edge bucket hoặc một cookie bucketing, không phải Vary: Cookie trên mọi thứ.
3. Nuxt routeRules hoặc Next RSC + revalidateTag. URL i18n trùng cần canonical. Navigation trong app không được inherit layout marketing nặng analytics. Copy pháp lý sai: CMS + purge, không rebuild cả. Ảnh OG không được generate mỗi request trên origin.

CDN (cache HTML theo path + locale, KHÔNG cookie)
  ├─ /          ISR/SSG  (CMS)     : cache dài, purge lúc publish
  ├─ /pricing   SSR/ISR            : A/B qua edge bucket, không Vary: Cookie
  ├─ /blog/:id  ISR + OG
  └─ /app/**    HTML no-store      : shell + app client, BFF /api
Cookie auth: host-only trên host app, không bao giờ trên trang cache được
Request homepage: ẩn danh. Cá nhân hóa sau paint.
Kill switch ở edge cho chiến dịch / CMS publish xấu.

Điều gì xảy ra: / cache được và ẩn danh. /app là no-store. Chunk dashboard không bao giờ load trên /. CMS publish xấu thì rollback bằng cách khôi phục revision trước và purge tag, không phải rebuild cả.

Lỗi hay gặp

• Triệu chứng: tên user trên homepage đã cache. Nguyên nhân: cookie trên /. Cách xử lý: HTML ẩn danh, cá nhân hóa sau paint.
• Triệu chứng: origin quá tải lúc chạy quảng cáo. Nguyên nhân: SSR /app ở scale marketing. Cách xử lý: shell no-store, CDN các route public.
• Triệu chứng: hit ratio ~0. Nguyên nhân: Vary: Cookie. Cách xử lý: edge bucket hoặc một cookie A/B chỉ trên /pricing.
• Triệu chứng: echarts trên /. Nguyên nhân: layout dùng chung. Cách xử lý: tách chunk dashboard; layout marketing giữ mỏng.