Personal learning library
These are your quick recall prompts. Ratings are stored only in this browser.
Advanced Frontend Rendering
From Rendering is a coordinate system · Say your answer first, then reveal the explanation.
A page can be static and streamed, server-rendered and partially hydrated, or built from Server Components while still producing cached HTML. Start with these four questions.
Advanced Frontend Rendering
From Rendering is a coordinate system · Say your answer first, then reveal the explanation.
The server sends a small shell; JavaScript fetches data and constructs the meaningful DOM. Rich post-load transitions are natural, but initial content competes with download, parse, execution, and data round trips.
Advanced Frontend Rendering
From Rendering is a coordinate system · Say your answer first, then reveal the explanation.
SSR produces HTML. Hydration attaches a client runtime to existing HTML. A server-rendered page can remain progressively enhanced with little or no hydration.
Advanced Frontend Rendering
From Hydration is a contract · Say your answer first, then reveal the explanation.
SSR can improve when content becomes visible without improving when custom interactions become available. A user may see a convincing button before its component code is downloaded and managed by the client runtime.
Advanced Frontend Rendering
From Hydration is a contract · Say your answer first, then reveal the explanation.
Execute component code to rebuild the client-side representation of the tree and recover state relationships.
Advanced Frontend Rendering
From Hydration is a contract · Say your answer first, then reveal the explanation.
Traditional whole-root hydration makes unrelated code part of one startup dependency. In React’s streaming architecture, Suspense boundaries can become hydration units: ready regions progress independently, and interaction raises a boundary’s priority.
Advanced Frontend Rendering
From Cache is a correctness policy · Say your answer first, then reveal the explanation.
Exactly which representation is stored: HTML, RSC payload, API response, query result, or asset?
Advanced Frontend Rendering
From Cache is a correctness policy · Say your answer first, then reveal the explanation.
Framework discussions often say “the cache” while several independent stores are active. Each has its own key, lifetime, and purge mechanism.
Advanced Frontend Rendering
From Cache is a correctness policy · Say your answer first, then reveal the explanation.
This simulation uses a 60-second fresh lifetime plus an allowed stale window. Notice that regeneration is usually triggered by traffic, and that the request crossing the boundary may still receive the old representation.
Advanced Frontend Rendering
From Server Components split the program · Say your answer first, then reveal the explanation.
An RSC framework may send all three on an initial visit. Treating them as one thing makes performance and debugging conversations fuzzy.
Advanced Frontend Rendering
From Server Components split the program · Say your answer first, then reveal the explanation.
Run in the framework’s server environment at build time or request time. They may await data and use server-only dependencies, but cannot hold browser state or event handlers.
Advanced Frontend Rendering
From Server Components split the program · Say your answer first, then reveal the explanation.
'use client' marks a module entry point and its transitive dependencies for client evaluation. It is not a label that affects only the component function in that file.
Advanced Frontend Rendering
From Streaming is reveal scheduling · Say your answer first, then reveal the explanation.
A strong answer distinguishes server work from network delivery and browser interactivity. Improving one clock does not guarantee the others improve.
Advanced Frontend Rendering
From Streaming is reveal scheduling · Say your answer first, then reveal the explanation.
The route needs a 180 ms shell, 450 ms recommendations, and 370 ms reviews. Compare dependency shape and reveal policy.
Advanced Frontend Rendering
From Streaming is reveal scheduling · Say your answer first, then reveal the explanation.
Good boundaries create useful intermediate states. They keep stable layout visible, reserve final geometry, and isolate optional latency without fragmenting the page into loading noise.
Advanced Frontend Rendering
From Islands budget interactivity · Say your answer first, then reveal the explanation.
An independently interactive client root embedded in server-rendered or static HTML.
Advanced Frontend Rendering
From Islands budget interactivity · Say your answer first, then reveal the explanation.
This content page has navigation, search, a gallery, and reviews. Switch architectures and observe the illustrative startup graph.
Advanced Frontend Rendering
From Islands budget interactivity · Say your answer first, then reveal the explanation.
An island can have HTML now while its code waits. Choose the trigger from interaction urgency and failure cost, not from a generic preference for laziness.
Advanced Frontend Rendering
From Resumability moves the startup cost · Say your answer first, then reveal the explanation.
After HTML crosses from server to browser, an interactive runtime needs listener locations, application state, and a reactive/component graph. Architectures differ in when and how they recover them.
Advanced Frontend Rendering
From Resumability moves the startup cost · Say your answer first, then reveal the explanation.
These are architectural models, not universal benchmarks. Select each to explain where the startup cost goes.
Advanced Frontend Rendering
From Resumability moves the startup cost · Say your answer first, then reveal the explanation.
A resumable system emits references that let a small loader locate an event handler chunk, restores supported state values, and retains dependency metadata so the browser need not eagerly execute the rendered tree merely to rediscover it.
Advanced Frontend Rendering
From Measure the critical path · Say your answer first, then reveal the explanation.
A route can have fast server rendering and poor interaction, or a tiny client bundle and slow origin data. Keep the evidence chain intact.
Advanced Frontend Rendering
From Measure the critical path · Say your answer first, then reveal the explanation.
Start from the reported symptom. The tool is useful only when it can confirm or reject a specific segment of the path.
Advanced Frontend Rendering
From Measure the critical path · Say your answer first, then reveal the explanation.
Averages hide long tails and cohort regressions. Report distributions and sample sizes.
Advanced Frontend Rendering
From Design a hybrid rendering system · Say your answer first, then reveal the explanation.
Design product pages and checkout entry for a catalog with millions of URLs. Product copy changes weekly; price and inventory change by market within seconds; recommendations may be slow; the cart is private; image galleries and add-to-cart are interactive. Search visibility, mobile performance, resilience, and operational cost matter.
Advanced Frontend Rendering
From Design a hybrid rendering system · Say your answer first, then reveal the explanation.
Select product requirements. The generated proposal is a starting hypothesis; your job is to explain every boundary and risk.
Advanced Frontend Rendering
From Design a hybrid rendering system · Say your answer first, then reveal the explanation.
It simplifies freshness but couples stable content to origin capacity and loses public cache reuse. Reserve request work for volatile or private regions.
Applied AI Engineering
From Find the load-bearing gaps · Say your answer first, then reveal the explanation.
Predict the approximate runtime and output order. Then rewrite main so the calls overlap while results remain in input order. Finally, explain how your design should behave if fetch(2) raises.
Senior Frontend Interviews
From State management is a classification problem. · Say your answer first, then reveal the explanation.
One component, a subtree, many components, the URL, or the server?
Senior Frontend Interviews
From Before choosing a store, find the source of truth. · Say your answer first, then reveal the explanation.
Who owns the fact: the component, the URL, the browser, the server, or the user’s draft?
Senior Frontend Interviews
From Ask: who re-renders when this changes? · Say your answer first, then reveal the explanation.
Context lets a component read a value from a distant parent without threading props through every intermediate component. Context itself does not define reducers, caching, persistence, or business rules.
Senior Frontend Interviews
From Choose a store by constraints, not fashion. · Say your answer first, then reveal the explanation.
Actions and reducers, direct store actions, observable mutations, or atom updates?
Senior Frontend Interviews
From Choose a store by constraints, not fashion. · Say your answer first, then reveal the explanation.
Modern Redux note: if choosing Redux today, discuss Redux Toolkit rather than legacy hand-written Redux. See the official Redux guidance .
Senior Frontend Interviews
From Choose a store by constraints, not fashion. · Say your answer first, then reveal the explanation.
“Redux is always too much.”
Senior Frontend Interviews
From Model lifecycles explicitly. · Say your answer first, then reveal the explanation.
State survives re-renders but resets when the component is removed or keyed differently.
Senior Frontend Interviews
From Model lifecycles explicitly. · Say your answer first, then reveal the explanation.
A form value is often not authoritative server data yet. Treat it as a client draft, validate it locally, submit a mutation, and decide how conflicts or server validation errors are represented.
Senior Frontend Interviews
From Model lifecycles explicitly. · Say your answer first, then reveal the explanation.
An optimistic update changes the UI before the server confirms success. It can make interactions feel fast, but it requires a rollback or reconciliation plan.
Nothing is due right now. Open a lesson to practice something new.