Unit 2: Rendering Strategies and Data Fetching - Practice Quiz

INT257 — Modern Web Application Development 60 Questions
0 Correct 0 Wrong 60 Left
0/60

1 What does Server-Side Rendering (SSR) mean?

Server-Side Rendering (SSR) Easy
A. HTML is generated on the server for each request
B. HTML is generated once during development
C. HTML is stored only in a database
D. HTML is generated only in the browser

2 What is the main characteristic of Static Site Generation (SSG)?

Static Site Generation (SSG) Easy
A. Pages are generated only by the browser
B. Pages are generated from live data per request
C. Pages are generated after every user click
D. Pages are generated during the build process

3 What does Incremental Static Regeneration (ISR) allow a website to do?

Incremental Static Regeneration (ISR) Easy
A. Render every page only in the browser
B. Update static pages after deployment
C. Remove all static pages after deployment
D. Prevent pages from ever changing

4 Where is most of the page content generated in Client-side Rendering?

Client-side Rendering Easy
A. In the database server
B. In the build system
C. In the web server only
D. In the user's browser

5 Which rendering strategy is generally suitable for content that changes rarely?

Rendering Strategy Selection Easy
A. Repeated server polling
B. Client-side Rendering
C. Server-side Rendering
D. Static Site Generation

6 Which factor is important when selecting a rendering strategy?

Rendering Strategy Selection Easy
A. The operating system of the database
B. The number of developer comments
C. How often the data changes
D. The color of the page background

7 Where do Server Components primarily render?

Server Components Easy
A. On the server
B. Only inside the browser
C. Inside the user's database
D. Only during CSS processing

8 Which feature commonly requires a Client Component?

Client Components Easy
A. Generating a build manifest
B. Handling a button click
C. Reading a static stylesheet
D. Creating a server log

9 What is one benefit of using Server Components?

Server Components Easy
A. No need for HTML responses
B. More database access from the browser
C. Less JavaScript sent to the browser
D. Automatic removal of all server code

10 Client Components are mainly used for which purpose?

Client Components Easy
A. Database table creation
B. Static file compression only
C. Interactive user interface behavior
D. Server hardware configuration

11 What is the Fetch API commonly used for?

Fetch API Easy
A. Creating database indexes
B. Compiling JavaScript files
C. Styling HTML elements
D. Making network requests

12 What does a successful HTTP response usually provide when using the Fetch API?

Fetch API Easy
A. A Response object
B. A CSS selector
C. A database schema
D. A browser extension

13 Which method is commonly used to read JSON from a Fetch API response?

Fetch API Easy
A. response.render()
B. response.style()
C. response.sql()
D. response.json()

14 When does client-side fetching usually occur?

Client-side Fetching Easy
A. Before the server receives a request
B. Only during database installation
C. Before the application is written
D. After JavaScript runs in the browser

15 Which is a common advantage of client-side fetching?

Client-side Fetching Easy
A. It always improves the first page load
B. It removes the need for an internet connection
C. It can update data without a full page reload
D. It prevents all network requests

16 Where does server-side data fetching take place?

Server-side Data Fetching Easy
A. During the user's keyboard input
B. On the server before the response is sent
C. Inside the browser's CSS engine
D. Only after the user closes the page

17 What is one benefit of fetching sensitive data on the server?

Server-side Data Fetching Easy
A. The browser receives every database password
B. Server credentials can remain private
C. The user can bypass server authorization
D. The database no longer needs authentication

18 What is caching?

Caching and Revalidation Easy
A. Storing data for possible reuse
B. Converting HTML into a database
C. Deleting data after every request
D. Blocking all repeated requests

19 What does revalidation usually mean?

Caching and Revalidation Easy
A. Checking whether cached data is still current
B. Removing the application source code
C. Changing a user's password automatically
D. Converting a server into a browser

20 What is a possible result of using a long cache duration?

Caching and Revalidation Easy
A. Automatic deletion of all page content
B. Slower responses with no stored data
C. More database writes on every request
D. Faster responses with older data

21 An e-commerce product page must display current inventory in its initial HTML and remain discoverable by search engines. Which rendering strategy best fits these requirements?

Server-Side Rendering (SSR) Medium
A. Render the page on the server for each request
B. Render an empty shell and fetch inventory in the browser
C. Store the complete page only in browser storage
D. Generate the page once during the application build

22 A server-rendered dashboard reads a user identifier from an authenticated request before loading account data. What is the main consequence for caching the complete HTML response?

Server-Side Rendering (SSR) Medium
A. The response should be cached separately by user
B. The response can be shared publicly across all users
C. The response becomes static after its first request
D. The response no longer requires authorization checks

23 A documentation website changes only when a new software version is released. Which approach generally provides the lowest request-time server workload?

Static Site Generation (SSG) Medium
A. Generate all documentation pages during the build
B. Fetch every document after the browser loads
C. Render every documentation page for each request
D. Regenerate every document on a fixed short interval

24 A statically generated catalog contains 100,000 product pages, and every build is becoming too slow. Which change most directly reduces build-time generation work?

Static Site Generation (SSG) Medium
A. Prebuild every product with a shorter cache duration
B. Request every product twice during the same build
C. Hydrate every product page with additional client code
D. Prebuild popular products and generate others on demand

25 A news article page uses ISR with a revalidation interval of 300 seconds. An editor publishes a correction 100 seconds after the latest generation. What should readers generally expect?

Incremental Static Regeneration (ISR) Medium
A. The old page may remain until revalidation occurs
B. The correction appears instantly without regeneration
C. The browser rewrites the stored HTML automatically
D. The page returns an error until the next full build

26 A product page uses time-based ISR, but an urgent price update must appear as soon as the pricing system changes. Which addition best addresses this requirement?

Incremental Static Regeneration (ISR) Medium
A. Store the new price only in local browser storage
B. Trigger on-demand revalidation after the price update
C. Increase the time-based revalidation interval
D. Disable all server-side requests for the product

27 A browser-rendered analytics page shows an empty container until a large JavaScript bundle executes and its API request completes. Which user-facing metric is most directly at risk?

Client-side Rendering Medium
A. Time required to write source files to disk
B. Time required to issue a TLS certificate
C. Time required to resolve the server hostname
D. Time until meaningful content becomes visible

28 A team is building an authenticated drawing tool with frequent pointer events, local state changes, and little need for search indexing. Why is client-side rendering suitable for its main workspace?

Client-side Rendering Medium
A. It guarantees that JavaScript is unnecessary in the browser
B. It allows private API credentials to be embedded in code
C. It generates every user drawing during the deployment build
D. It supports rich interactions without full-page navigation

29 A site has public marketing pages, frequently updated product prices, and a private interactive account area. Which combination is the most appropriate starting point?

Rendering Strategy Selection Medium
A. ISR for marketing, browser storage for prices, and SSR without scripts for accounts
B. Client rendering for marketing, SSG for products, and SSG for accounts
C. SSG for marketing, SSR or ISR for products, and client rendering for accounts
D. SSR for marketing, SSG for prices, and build-time rendering for accounts

30 A public transit page must show live arrival times, but its route descriptions change only monthly. Which design best balances freshness and performance?

Rendering Strategy Selection Medium
A. Rebuild the entire application whenever a vehicle moves
B. Fetch descriptions repeatedly but embed fixed arrival times
C. Statically render both descriptions and arrival times monthly
D. Statically render descriptions and fetch arrivals dynamically

31 A component reads records directly from a database and renders a non-interactive table. What is a key benefit of implementing it as a Server Component?

Server Components Medium
A. The database connection becomes available to every visitor
B. The table automatically supports browser click handlers
C. The component can use browser local storage during rendering
D. Database access code stays out of the browser bundle

32 A Server Component needs to include an interactive favorite button. Which component structure is most appropriate?

Server Components Medium
A. Move the database credentials into the favorite button's props
B. Keep data rendering on the server and nest a Client Component button
C. Convert the entire page into static HTML with no JavaScript
D. Add the browser click handler directly to the Server Component

33 A search filter uses useState, responds to input events, and reads localStorage. Why must it run as a Client Component?

Client Components Medium
A. It depends on browser APIs and interactive state
B. It must generate all search pages during the build
C. It needs direct access to private database credentials
D. It can execute only before HTML reaches the browser

34 A page currently marks its top-level layout as a Client Component only because one nested menu needs toggle state. What change is most likely to reduce client-side JavaScript?

Client Components Medium
A. Move the client boundary up to the application root
B. Move the client boundary down to the menu
C. Fetch the entire layout again after every toggle
D. Duplicate the menu state in every server component

35 The code fetch('/api/orders').then(response => response.json()) attempts to parse an HTTP 404 response as normal data. Which check should be added before parsing?

Fetch API Medium
A. Check response.ok and handle a false value
B. Check response.type and require an opaque value
C. Check response.redirected and require a true value
D. Check response.bodyUsed and require a true value

36 A user changes a search term quickly, and an older request sometimes finishes after a newer request and overwrites the results. Which Fetch API feature best prevents this?

Fetch API Medium
A. Convert the previous response with response.text()
B. Clone the previous response before parsing it
C. Set the previous request method to HEAD
D. Cancel the previous request with AbortController

37 A client-rendered component starts a data request inside an effect whenever productId changes. What should it do when the component unmounts or productId changes again?

Client-side Fetching Medium
A. Reload the browser before sending another request
B. Reuse the obsolete result for every product
C. Abort or ignore the obsolete request
D. Store the unfinished response in the document title

38 A page must call an internal service using a private API key and include the result in the initial HTML. Where should the request be made?

Server-side Data Fetching Medium
A. In local storage using a user-provided API key
B. In the browser using a bundled environment variable
C. In the HTML using a visible metadata attribute
D. On the server using a protected environment variable

39 A shared cache stores responses for /api/profile, but the endpoint returns data based on the current user's session cookie. Which cache policy is safest?

Caching and Revalidation Medium
A. Use a private cache or disable shared caching
B. Use the same public cache key for every session
C. Share one cached response among all authenticated users
D. Cache forever and remove session validation

40 An API response includes Cache-Control: max-age=60, stale-while-revalidate=300. What behavior does this permit after the first 60 seconds?

Caching and Revalidation Medium
A. Serve stale content temporarily while refreshing it
B. Delete the cached content and block for five minutes
C. Treat the content as permanently fresh for six minutes
D. Send every request directly to the origin without caching

41 A news page is rendered on every request. Its HTML contains current headlines, but the browser later reports a hydration mismatch because the server and client rendered different timestamps. Which change most directly preserves SSR while preventing the mismatch?

Server-Side Rendering (SSR) Hard
A. Render the server timestamp again from the client's current clock
B. Pass the server timestamp to the client and reuse it during hydration
C. Cache the entire server response until both clocks become synchronized
D. Remove the timestamp from HTML and obtain all headlines after hydration

42 An SSR product page performs three independent upstream requests taking ms, ms, and ms. Ignoring framework overhead, what is the best achievable data-fetching latency if all requests begin concurrently?

Server-Side Rendering (SSR) Hard
A. ms
B. ms
C. ms
D. ms

43 A documentation site has 500,000 versioned pages, but only 2% receive regular traffic. A full build has become prohibitively slow. Which design best preserves static delivery without generating every page during each deployment?

Static Site Generation (SSG) Hard
A. Server-render all pages on every request without response caching
B. Prebuild popular pages and generate uncommon pages on first request
C. Render every page in the browser from an empty HTML shell
D. Prebuild every page and increase the deployment timeout indefinitely

44 A statically generated pricing page reads prices from a database only during the production build. The database changes two hours later, and no regeneration mechanism is configured. What will users receive from the existing deployment?

Static Site Generation (SSG) Hard
A. The old prices only for users with active sessions
B. The new prices after the browser cache expires
C. The old prices until another build is deployed
D. The new prices when the CDN performs validation

45 An ISR page has a revalidation interval of 60 seconds. A cached version is 75 seconds old when a request arrives, and the platform uses stale-while-revalidate behavior. What response pattern should be expected?

Incremental Static Regeneration (ISR) Hard
A. The request blocks until regeneration finishes and then receives new content
B. The request receives stale content while regeneration starts in the background
C. The request receives an error until a deployment replaces the stale page
D. The request bypasses regeneration and permanently extends the cached version

46 A regenerated ISR page depends on a database that is temporarily unavailable. The previous generated page is valid but stale. Which failure policy usually provides the strongest availability without publishing an incomplete page?

Incremental Static Regeneration (ISR) Hard
A. Keep serving the previous page and retry regeneration later
B. Convert the page permanently to uncached client-side rendering
C. Delete the cached page and return an error to every request
D. Replace the previous page with the partial regeneration output

47 A client-rendered dashboard fetches /api/account after mounting. When a user signs out and another signs in within the same browser tab, the old request completes last and overwrites the new account state. Which solution addresses the underlying race?

Client-side Rendering Hard
A. Cancel obsolete requests or ignore responses whose request identity is stale
B. Render the previous account until the next full browser navigation
C. Increase the cache lifetime so both account responses remain available
D. Move the fetch into a later timer so authentication settles beforehand

48 A CSR application receives a minimal HTML shell and loads a large JavaScript bundle before requesting page data. On slow mobile devices, which change most directly improves first meaningful content without abandoning CSR for later interactions?

Client-side Rendering Hard
A. Disable HTTP compression to reduce browser decompression work
B. Store the JavaScript bundle in component state after execution
C. Embed route-critical data and prerender the initial content
D. Add more client effects that fetch the same data independently

49 A commerce application has public product descriptions updated hourly, user-specific inventory by region, and a cart that changes immediately in the browser. Which rendering composition best matches those requirements?

Rendering Strategy Selection Hard
A. Regenerate product content, fetch regional inventory per request, and manage the cart client-side
B. Render product content, inventory, and cart entirely on every server request
C. Render an empty shell and fetch product content, inventory, and cart only after mounting
D. Build all product, inventory, and cart states statically during each hourly deployment

50 A page must be indexed with complete content, uses request-time authorization, and displays confidential records that must never be stored in a shared cache. Which primary rendering strategy is most appropriate?

Rendering Strategy Selection Hard
A. Uncached SSR after server-side authorization
B. Shared ISR with a short regeneration interval
C. Public SSG with authorization performed during hydration
D. CSR using an API credential embedded in the bundle

51 A Server Component imports a database client, reads records, and passes selected fields to a nested Client Component. Which boundary rule is essential?

Server Components Hard
A. The Server Component must attach browser event listeners directly
B. The Client Component must execute its initial render in the database
C. The database client must also be imported by the Client Component
D. Props crossing the boundary must be serializable values

52 A component only formats fetched records into a table and has no state, effects, browser APIs, or event handlers. It currently ships a large formatting dependency to the browser. What is the strongest reason to make it a Server Component?

Server Components Hard
A. Its formatting dependency can remain outside the client bundle
B. Its database records will become permanently cached by default
C. Its table will automatically become editable without event handlers
D. Its output will no longer require any server computation

53 An interactive search Client Component receives an initial result list from a Server Component, then filters that list as the user types. Which implementation respects the component boundary while avoiding an unnecessary initial duplicate request?

Client Components Hard
A. Import the server database module and query it directly from the browser
B. Pass serializable initial results as props and store only interactive state on the client
C. Discard the initial results and always refetch them in a mount effect
D. Pass a live database cursor as a prop and iterate over it on input

54 A developer marks the application root as a Client Component merely because one deeply nested button uses onClick. What is the most significant architectural consequence?

Client Components Hard
A. Server-only modules become safe to expose through browser imports
B. Every nested fetch automatically becomes private and uncached
C. All nested components become statically generated without JavaScript
D. A much larger subtree becomes part of the client JavaScript boundary

55 A request made with fetch() receives HTTP status 404 and a valid JSON error body. No network failure occurs. Which statement describes the promise behavior?

Fetch API Hard
A. The promise remains pending until the JSON error body is discarded
B. The promise resolves, so code must inspect response.ok or response.status
C. The promise resolves only if the request used the HEAD method
D. The promise rejects automatically because every 4xx status is an exception

56 The same Response object's body is parsed with await response.json() and then read with await response.text(). What should the code expect under standard Fetch API body semantics?

Fetch API Hard
A. The second read fails because the body stream has already been consumed
B. The second read returns the original JSON with normalized indentation
C. The second read starts a new HTTP request using the same response headers
D. The second read succeeds because parsed bodies are automatically rewound

57 A search field requests results for each query. Responses may arrive out of order, and cached results should be reused when the user returns to an earlier query. Which cache key design is necessary for correctness?

Client-side Fetching Hard
A. A constant key shared by every query and authenticated user
B. A timestamp key based only on when the component mounted
C. A stable key containing every input that changes the result
D. A random key generated after each response has completed

58 A server-rendered page fetches an internal API that merely forwards the request to a database available to the same server process. Under what condition is querying the database directly usually preferable?

Server-side Data Fetching Hard
A. When database credentials must be serialized into the generated browser bundle
B. When the query must run again in a client effect after every hydration
C. When the API adds no required policy boundary and the direct module is server-only
D. When the API response must cross an additional network hop for consistency

59 A shared cache stores /profile responses, but the server chooses the profile from an authentication cookie. Which caching change is required to prevent one user's profile from being served to another?

Caching and Revalidation Hard
A. Use a private cache or bypass shared caching for the personalized response
B. Increase the shared cache lifetime so each profile remains stable
C. Use one public cache key because the URL is identical for all users
D. Remove cookie variation while retaining the shared cached response

60 A product mutation succeeds, and the application invalidates only the cache entry for /products/42. The product also appears in /products, /featured, and a category page. Which strategy most reliably prevents stale derived views?

Caching and Revalidation Hard
A. Invalidate the detail URL and assume list caches detect the mutation
B. Tag related cache entries by product and invalidate that tag
C. Shorten only the browser cache lifetime for /products/42
D. Change the mutation to GET so intermediary caches observe it