Architecture scenarioHard~10 min

Interview question

When should you use an Angular @defer block?

Defers non-critical UI with deliberate triggers, placeholders, prefetching, and hydration behavior while protecting core interactions.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I use @defer for code that is not required for the initial view or primary interaction, such as a heavy editor or below-the-fold panel. I choose a trigger that matches user intent, provide a stable placeholder and useful loading or error state, and measure the result. I do not defer content whose absence would make the page incomplete or inaccessible.

Full answer below

Practice focus

Angular @defer, code splitting, triggers, prefetch, placeholders, loading states, SSR, hydration, and Core Web Vitals.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
@defer can remove code from the initial bundle, but the trigger decides when users pay the loading and rendering cost.
I use @defer for code that is not required for the initial view or primary interaction, such as a heavy editor or below-the-fold panel. I choose a trigger that matches user intent, provide a stable placeholder and useful loading or error state, and measure the result. I do not defer content whose absence would make the page incomplete or inaccessible.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
A viewport trigger fits below-the-fold content, while interaction or hover may fit an optional tool; idle is not automatically correct because it can compete with more important work. Prefetch can reduce wait after a clear intent signal without rendering the block yet. Nested blocks need different triggers so they do not produce a cascade of simultaneous requests. Placeholder dimensions protect layout stability.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
With server rendering I decide whether incremental hydration and server-side behavior match the route's caching and interaction requirements. I test slow chunks, offline failure, rapid navigation, keyboard access, and whether the trigger exists before JavaScript is ready. Analytics can show whether a deferred feature is commonly opened immediately, which may mean it belongs in the initial path. The decision balances initial loading, later responsiveness, request overhead, and product priority rather than maximizing the count of deferred blocks.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Deferring content needed for the page's primary purpose.
Using idle for every block without measuring contention.
Leaving a placeholder that causes a large layout shift.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Several nested defer blocks request their chunks at once.
Keyboard users cannot activate the chosen trigger.
Most users wait for the deferred feature immediately after load.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How do render and prefetch triggers differ?
What makes a good placeholder?
How does SSR affect the decision?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

1 linked

Prerequisite

Review this first if the current drill feels shaky.

Angular bundle budgetsUses bundle evidence to decide which view is worth deferring.

Practice route

Read core answer Review checklist Follow-up prompts Track progress

Finished this drill?

Practice freely. Sign in only when you want to save completion, confidence, notes, or bookmarks.

New to Aporeon? Create account

Drill details

Human editorial direction

Aporeon is shaped by Aleksandar Tomovski, a software developer with experience on both sides of technical interviews. Content is reviewed for accuracy, natural spoken delivery, useful depth, and honest trade-offs.

About the creator Editorial standards

Was this drill useful?

Help improve the interview library.

Found this answer useful?

Say thanks with a standalone, one-time $5 contribution. No account required.

No subscription or perks.Choose another amount

Opening drill

Architecture scenarioHard~10 min

Interview question

When should you use an Angular @defer block?

Defers non-critical UI with deliberate triggers, placeholders, prefetching, and hydration behavior while protecting core interactions.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Angular @defer, code splitting, triggers, prefetch, placeholders, loading states, SSR, hydration, and Core Web Vitals.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
@defer can remove code from the initial bundle, but the trigger decides when users pay the loading and rendering cost.
I use @defer for code that is not required for the initial view or primary interaction, such as a heavy editor or below-the-fold panel. I choose a trigger that matches user intent, provide a stable placeholder and useful loading or error state, and measure the result. I do not defer content whose absence would make the page incomplete or inaccessible.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
A viewport trigger fits below-the-fold content, while interaction or hover may fit an optional tool; idle is not automatically correct because it can compete with more important work. Prefetch can reduce wait after a clear intent signal without rendering the block yet. Nested blocks need different triggers so they do not produce a cascade of simultaneous requests. Placeholder dimensions protect layout stability.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
With server rendering I decide whether incremental hydration and server-side behavior match the route's caching and interaction requirements. I test slow chunks, offline failure, rapid navigation, keyboard access, and whether the trigger exists before JavaScript is ready. Analytics can show whether a deferred feature is commonly opened immediately, which may mean it belongs in the initial path. The decision balances initial loading, later responsiveness, request overhead, and product priority rather than maximizing the count of deferred blocks.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Deferring content needed for the page's primary purpose.
Using idle for every block without measuring contention.
Leaving a placeholder that causes a large layout shift.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Several nested defer blocks request their chunks at once.
Keyboard users cannot activate the chosen trigger.
Most users wait for the deferred feature immediately after load.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How do render and prefetch triggers differ?
What makes a good placeholder?
How does SSR affect the decision?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

1 linked

Prerequisite

Review this first if the current drill feels shaky.

Angular bundle budgetsUses bundle evidence to decide which view is worth deferring.

When should you use an Angular @defer block?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

When should you use an Angular @defer block?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite