Quiz2Know

IT

Frontend Architecture: Micro-Frontends & Rendering

Evaluate your knowledge of Modern Frontend Architecture, SSR, SSG, Hydration mechanics, Islands Architecture, and Module Federation.

This is a free, 16-question multiple-choice quiz. Answer each question to see whether you got it right, with an explanation for every answer. There is no sign-up and no time limit — take it as many times as you like, and scroll down for the full answer key once you are done.

Question 1 of 16

0 correct

What is the technical problem known as 'Hydration Overhead' in traditional single-page application SSR?

Press A–D to choose · Enter to submit

Answer key & explanations

Every question in this quiz, with the correct answer marked and an explanation of why it is right. Use it to revise before or after taking the quiz above.

  1. 1.What is the technical problem known as 'Hydration Overhead' in traditional single-page application SSR?

    • AThe server takes too long to render raw HTML strings
    • BThe browser must download, parse, and execute the entire JavaScript bundle to attach event listeners to an already-rendered HTML DOM✓ Correct
    • CThe browser refuses to display CSS stylesheets until JavaScript loads
    • DThe server runs out of heap memory when serving concurrent users

    Correct answer: The browser must download, parse, and execute the entire JavaScript bundle to attach event listeners to an already-rendered HTML DOM

    Hydration requires the browser to parse and execute large JS bundles to attach event listeners and reconstruct state for server-rendered HTML, blocking interaction during the process.

  2. 2.How does Islands Architecture (e.g., Astro) improve client-side performance compared to classic SSR?

    • AIt renders all user interfaces inside isolated canvas elements
    • BIt renders the page mostly as static HTML, hydrating only isolated interactive components ('islands') independently✓ Correct
    • CIt compiles JavaScript code into native machine assembly
    • DIt forces all client-side code to execute in background Web Workers

    Correct answer: It renders the page mostly as static HTML, hydrating only isolated interactive components ('islands') independently

    Islands Architecture keeps the bulk of the page pure static HTML and selectively hydrates only the specific interactive components, reducing the client JavaScript footprint.

  3. 3.What is the core capability provided by Webpack Module Federation?

    • ACombining multiple CSS stylesheets into a single minified file
    • BAllowing a JavaScript application to dynamically import and execute modules from a completely independent remote build at runtime✓ Correct
    • CCompressing SVG icons into base64 strings automatically
    • DConverting React JSX code directly into plain HTML without compilers

    Correct answer: Allowing a JavaScript application to dynamically import and execute modules from a completely independent remote build at runtime

    Module Federation enables JavaScript applications to dynamically load code from independent remote builds at runtime, facilitating decoupled micro-frontend architectures.

  4. 4.What is Resumability in modern frontend frameworks like Qwik?

    • AThe ability to resume interrupted video streams without buffering
    • BResuming execution directly from server-serialized state and HTML without needing to execute a full client-side hydration phase✓ Correct
    • CSaving user form progress in the browser's localStorage automatically
    • DRestarting crashed background Web Workers without refreshing the page

    Correct answer: Resuming execution directly from server-serialized state and HTML without needing to execute a full client-side hydration phase

    Resumability serializes the application state directly into the HTML; the browser does not need to re-execute component trees on load, downloading and running code only upon actual interaction.

  5. 5.What is the difference between Static Site Generation (SSG) and Server-Side Rendering (SSR)?

    • ASSG renders HTML at build time; SSR generates HTML dynamically on the server at request time for each incoming request✓ Correct
    • BSSG requires an active Node.js server in production; SSR can run on static S3 buckets
    • CSSG cannot use CSS styling; SSR can use any styling framework
    • DSSG only works for mobile applications; SSR is for desktop browsers

    Correct answer: SSG renders HTML at build time; SSR generates HTML dynamically on the server at request time for each incoming request

    SSG generates static HTML files ahead of time during the CI/CD build phase, while SSR executes rendering dynamically on the server upon every user request.

  6. 6.What is Incremental Static Regeneration (ISR)?

    • ARebuilding the entire frontend application whenever a git commit is pushed
    • BUpdating individual static pages in the background after deployment without needing to rebuild the entire website✓ Correct
    • CGenerating dynamic PDF files from React components on the fly
    • DRefreshing the user's browser window using WebSockets when files change

    Correct answer: Updating individual static pages in the background after deployment without needing to rebuild the entire website

    ISR allows static pages to be regenerated in the background on-demand as requests come in, combining the speed of static sites with dynamic freshness.

  7. 7.What performance issue is Core Web Vital 'Cumulative Layout Shift' (CLS) designed to measure?

    • AThe time required for the server to respond with the first byte of HTML
    • BThe visual stability of the page by quantifying unexpected layout movements during page load✓ Correct
    • CThe time it takes for the largest contentful image to finish rendering
    • DThe total size in megabytes of all loaded JavaScript bundles

    Correct answer: The visual stability of the page by quantifying unexpected layout movements during page load

    CLS measures visual stability, calculating how often elements shift unexpectedly during rendering (e.g., from un-dimensioned images or injected ads).

  8. 8.What is the primary architecture of React Server Components (RSC)?

    • AComponents that execute purely on the client side inside hidden iframes
    • BComponents that execute strictly on the server, producing a stream of virtual DOM instructions without adding to client JS bundle size✓ Correct
    • CComponents that run directly inside the browser's WebGL canvas context
    • DComponents that translate JavaScript code into WebAssembly modules

    Correct answer: Components that execute strictly on the server, producing a stream of virtual DOM instructions without adding to client JS bundle size

    RSCs run exclusively on the server, accessing backend data directly and emitting a serialized virtual DOM tree that adds zero bytes to the client JavaScript bundle.

  9. 9.Why can iframes be problematic when used as a micro-frontend integration strategy?

    • AThey are not supported in modern web browsers
    • BThey introduce isolation boundaries that complicate deep linking, responsiveness, modal dialogs, and cross-frame state sharing✓ Correct
    • CThey automatically disable all incoming HTTP cookies
    • DThey prevent the browser from rendering SVG vector icons

    Correct answer: They introduce isolation boundaries that complicate deep linking, responsiveness, modal dialogs, and cross-frame state sharing

    While iframes offer strong style and script isolation, they introduce routing desynchronization, layout sizing challenges, accessibility hurdles, and state sharing friction.

  10. 10.What is the purpose of the Shadow DOM in the Web Components standard?

    • ATo render hidden tracking pixels for analytics scripts
    • BTo encapsulate component styles and markup in an isolated subtree, preventing global CSS leakage✓ Correct
    • CTo accelerate 3D graphics rendering in HTML5 games
    • DTo run JavaScript scripts inside background service worker threads

    Correct answer: To encapsulate component styles and markup in an isolated subtree, preventing global CSS leakage

    The Shadow DOM encapsulates an element's internal DOM tree and scoped CSS, preventing styles defined inside from leaking out and global page styles from bleeding in.

  11. 11.What is Tree Shaking in modern JavaScript bundlers (like Rollup, Vite, or Webpack)?

    • AA tool that converts JSX code into TypeScript definitions
    • BThe process of eliminating unused, dead code from the final bundle using static ES module (import/export) analysis✓ Correct
    • CAn algorithm that balances the depth of the virtual DOM tree
    • DA linter that sorts CSS properties in alphabetical order

    Correct answer: The process of eliminating unused, dead code from the final bundle using static ES module (import/export) analysis

    Tree shaking relies on the static structure of ES modules (import/export) to trace active code paths and discard unused exports from production bundles.

  12. 12.What is Streaming SSR with HTML Suspense?

    • AStreaming live video feeds directly into HTML canvas elements
    • BStreaming chunks of server-rendered HTML progressively over a single connection, allowing fast parts of the page to render before slow data loads✓ Correct
    • CCompressing HTML pages using Brotli streaming before writing to disk
    • DRunning multiple SSR servers in parallel and racing their responses

    Correct answer: Streaming chunks of server-rendered HTML progressively over a single connection, allowing fast parts of the page to render before slow data loads

    Streaming SSR flushes initial HTML layout immediately, followed by deferred script tags and HTML chunks as slower async components resolve on the server.

  13. 13.What is Interaction to Next Paint (INP) measuring in Core Web Vitals?

    • AThe time required for the web server to compile CSS files
    • BThe overall responsiveness of a page by measuring the latency of all user interactions (clicks, taps, keypresses) throughout the visit✓ Correct
    • CThe time it takes to download the primary web font
    • DThe duration of the initial SSL handshake

    Correct answer: The overall responsiveness of a page by measuring the latency of all user interactions (clicks, taps, keypresses) throughout the visit

    INP evaluates overall page responsiveness by measuring the time between user interactions (clicks, keystrokes) and the next visual frame update across the whole visit.

  14. 14.What is the role of an Import Map in modern browsers?

    • ARendering geographical maps using OpenStreetMap tiles
    • BAllowing browsers to resolve bare module specifiers (e.g., 'import lodash') directly to specific URLs without bundler translation✓ Correct
    • CMapping database tables to frontend JavaScript objects
    • DVisualizing bundle sizes during local development

    Correct answer: Allowing browsers to resolve bare module specifiers (e.g., 'import lodash') directly to specific URLs without bundler translation

    Import maps allow native browser ES module imports to resolve bare package names (like import React from 'react') to designated remote or local URLs without a build step.

  15. 15.How does a Service Worker differ from a Web Worker?

    • AA Service Worker acts as a programmable network proxy intercepting HTTP requests; a Web Worker executes general-purpose background compute tasks✓ Correct
    • BA Service Worker runs on the server; a Web Worker runs in the client's browser
    • CA Service Worker can manipulate the DOM directly; a Web Worker cannot
    • DA Service Worker is limited to 1 megabyte of memory; a Web Worker has unlimited memory

    Correct answer: A Service Worker acts as a programmable network proxy intercepting HTTP requests; a Web Worker executes general-purpose background compute tasks

    Service Workers act as network proxies to manage caching, offline modes, and push events; Web Workers run general background CPU compute tasks without network interception capabilities.

  16. 16.What problem does Route-based Code Splitting solve?

    • AIt splits server-side databases across geographical regions
    • BIt breaks JavaScript bundles into separate files loaded on demand only when the user navigates to a specific route✓ Correct
    • CIt translates URL pathnames into multiple foreign languages
    • DIt prevents web browsers from caching dynamic HTML pages

    Correct answer: It breaks JavaScript bundles into separate files loaded on demand only when the user navigates to a specific route

    Route-based code splitting ensures users download only the JavaScript needed for their current page, deferring code for other routes until navigation occurs.

More free quizzes