Frontend chuyên sâu

14 câu rút từ các phần của chuỗi. Trả lời ở đây cũng được tính cho quiz của từng bài.

1. Câu 1/14·Trung cấpTrong mô hình hai module graph, "use client" thực sự có ý nghĩa gì?

   Đánh dấu một component là chỉ chạy ở trình duyệt, không bao giờ render trên serverĐánh dấu một entry của client graph: mọi thứ file đó import đều bị kéo vào client bundle, dù Client Component vẫn được SSR ra HTML ở lần tải đầuBắt buộc phải có ở mọi file dùng useState hoặc useEffect, kể cả file lá được import từ Client Component khácLà đối của "use server": một cái đánh dấu component client, cái kia đánh dấu Server Component
2. Câu 2/14·Trung cấpMột ReviewsDrawer (client, có state mở/đóng) cần hiển thị Reviews là async Server Component đọc DB. Cách đúng là gì?

   Import Reviews trực tiếp trong ReviewsDrawer; bundler sẽ tự giữ nó ở serverThêm "use server" vào Reviews để client có thể import đượcRender <Reviews /> ở Server Component cha và truyền vào ReviewsDrawer qua childrenChuyển Reviews thành Client Component và fetch bằng useEffect
3. Câu 3/14·Trung cấpstaleTime và gcTime khác nhau thế nào trong TanStack Query v5?

   staleTime là thời gian tối đa query được giữ trong cache; gcTime là thời gian giữa hai lần refetchstaleTime quyết định bản sao còn tươi bao lâu (không refetch); gcTime quyết định entry không còn ai dùng được giữ bao lâu trước khi bị xoáCả hai cùng đo một thứ, gcTime chỉ là tên mới của cacheTime cho staleTimestaleTime chỉ áp dụng khi offline, gcTime chỉ áp dụng khi online
4. Câu 4/14·Nâng caoVì sao trên server (Next.js) không nên dùng một QueryClient ở module scope?

   Vì QueryClient không serialize được xuống clientVì nó làm bundle server lớn hơnVì một process Node.js phục vụ nhiều người dùng; client dùng chung khiến dữ liệu người này lọt vào cache khi render cho người khácVì staleTime mặc định luôn bằng 0 trên server
5. Câu 5/14·Trung cấpMục tiêu thiết kế của route map trong bài là gì, và nó mang lại lợi ích gì khi ai đó đổi path của một endpoint?

   Mỗi endpoint chỉ khai báo một lần (method, path, schema) và mọi type phía người gọi được suy ra từ đó, nên các chỗ gọi không còn khớp sẽ dừng compileViết tay một interface params cho từng route để IDE gợi ý tốt hơn, và cập nhật chúng khi path đổiSinh code từ tài liệu OpenAPI lúc build để tránh phải viết type nào bằng tayDùng một type string cho mọi path để client linh hoạt, còn việc kiểm tra để lại cho server
6. Câu 6/14·Nâng caoBạn khai báo const routes: RouteMap = { ... } và thấy mọi lời gọi client đều không đòi params. Nguyên nhân và cách khắc phục?

   Zod không suy luận được params; cần thêm z.infer cho từng routeAnnotation làm path bị nới thành string, nên PathParams rỗng {}; dùng defineRoutes<const R> hoặc as const satisfies RouteMap để giữ literalsatisfies luôn làm mất literal; phải bỏ nó và chỉ dùng annotationTemplate literal type không hoạt động với object lồng nhau; phải làm phẳng route map
7. Câu 7/14·Cơ bảnMột đồng nghiệp viết div với role="button" và onClick, cho rằng như vậy là đủ accessible. Điều gì còn thiếu?

   Không thiếu gì, role="button" đã làm phần tử focus được và kích hoạt bằng Enter/Space.Chỉ thiếu aria-label, vì accessible name là thứ duy nhất ARIA không tự có.ARIA chỉ đổi cái phần tử báo cho công nghệ hỗ trợ; focus, Enter và Space vẫn phải tự code, nên dùng button native tốt hơn.Thiếu aria-hidden để screen reader không đọc trùng nội dung.
8. Câu 8/14·Trung cấpVì sao combobox cho phép gõ dùng aria-activedescendant thay vì roving tabindex để di chuyển giữa các gợi ý?

   Vì focus DOM phải ở lại ô input để người dùng vừa lướt gợi ý vừa gõ tiếp được.Vì roving tabindex không được hỗ trợ bởi screen reader nào.Vì aria-activedescendant tự cuộn option vào tầm nhìn và tự áp :focus-visible.Vì option không thể có id nên không thể nhận focus thật.
9. Câu 9/14·Trung cấpBạn chuyển việc parse CSV sang Web Worker, nhưng trang vẫn khựng gần nửa giây khi worker gửi kết quả (hai trăm nghìn object) về. Nguyên nhân chính là gì?

   Worker chạy chung thread với main thread nên việc parse vẫn chặn UI.Structured clone phải serialize và deserialize từng object, nên main thread vẫn trả phí khi nhận dữ liệu về.postMessage luôn bất đồng bộ hoàn toàn nên kết quả bị trễ trước khi đến main thread.Worker không được phép trả về object, chỉ trả được chuỗi nên phải JSON.parse lại.
10. Câu 10/14·Cơ bảnTrang của bạn chậm vì React phải render một danh sách mười nghìn dòng. Có nên đưa việc này vào Web Worker không?

    Có, vì render là việc nặng nhất nên worker sẽ giải phóng main thread.Có, nhưng chỉ khi dùng SharedArrayBuffer để chia sẻ DOM giữa hai thread.Không, vì worker không truy cập được DOM; phần chậm là render nên cần virtualization hoặc giảm số node.Không, vì worker chỉ chạy được khi dữ liệu nhỏ hơn 1 MB.
11. Câu 11/14·Cơ bảnLighthouse báo LCP 1,2 giây còn Search Console (CrUX) báo 3,8 giây. Cách hiểu nào đúng theo bài?

    Field data bị sai vì máy lab là môi trường chuẩn nên con số lab đáng tin hơnLab đã lỗi thời; nên bỏ Lighthouse khỏi CI và chỉ dùng CrUXKhông cái nào sai: lab đo một máy giả lập cố định, field đo người dùng thật với thiết bị, mạng và cache đa dạng; dùng mỗi loại cho đúng việcCrUX luôn chậm hơn vì nó đo cả thời gian server, còn lab thì không
12. Câu 12/14·Trung cấpĐể không mất CLS và INP khi người dùng đóng trang, nên làm thế nào?

    Gom event vào hàng đợi, flush khi visibilitychange sang hidden (kèm pagehide làm lưới an toàn) và gửi bằng sendBeacon hoặc fetch với keepaliveGửi bằng fetch thường trong handler unload vì đây là sự kiện cuối cùng chắc chắn bắnGửi từng metric ngay khi đo được, vì chỉ có cách đó mới không bị mấtChuyển sang gửi đồng bộ bằng XHR trong beforeunload để trang đợi request xong
13. Câu 13/14·Trung cấpNhóm 2 người nói "tách micro-frontends để app nhanh hơn và build đỡ chậm". Đánh giá nào đúng theo bài?

    Hợp lý, vì mỗi remote nhỏ hơn nên tải nhanh hơnSai lý do: micro-frontends giải quyết bài toán tổ chức (nhiều team deploy độc lập), thường làm app nặng hơn; build chậm thì dùng Turborepo/Nx và cacheHợp lý, miễn là mỗi team dùng framework riêngChỉ sai ở chỗ phải dùng iframe thay vì Module Federation
14. Câu 14/14·Nâng caoVì sao React và React DOM phải được khai báo là shared singleton trong Module Federation, và hậu quả khi quên một trong hai?

    Hai bản React trên trang làm hook/context không dùng chung được; ví dụ quên react-dom có thể gây "Invalid hook call" chỉ khi đi đúng một đường điều hướng, rất khó tái hiệnSingleton giúp bundle của remote nhỏ hơn; quên thì chỉ tăng kích thước tảiSingleton bắt buộc để remote và shell dùng chung CSSQuên khai báo thì Module Federation tự chọn bản mới nhất nên không có hậu quả