Interview kitsBlog

Your dream job? Lets Git IT.
Interactive technical interview preparation platform designed for modern developers.

XGitHub

Platform

  • Categories

Resources

  • Blog
  • About the app
  • FAQ
  • Feedback

Legal

  • Privacy Policy
  • Terms of Service

© 2026 LetsGit.IT. All rights reserved.

LetsGit.IT/Categories/Next.js
Next.jsmedium

What is `loading.tsx` in the App Router and how does it relate to streaming?

Tags
#nextjs#loading#suspense#streaming
Back to categoryPractice quiz

Answer

`loading.tsx` provides a route‑segment loading UI that is shown while the segment is being streamed or suspended. It works with React Suspense and lets users see partial UI earlier instead of waiting for the whole page.

Advanced answer

Deep dive

Expanding on the short answer — what usually matters in practice:

  • Context (tags): nextjs, loading, suspense, streaming
  • Lifecycle: what happens at runtime (render/build, request/response, background jobs).
  • Caching: where cache lives, cache keys, how to invalidate without chaos.
  • Security: authn/authz, secrets, attack surface (SSRF/CSRF).
  • Explain the "why", not just the "what" (intuition + consequences).
  • Trade-offs: what you gain/lose (time, memory, complexity, risk).
  • Edge cases: empty inputs, large inputs, invalid inputs, concurrency.

Examples

A tiny example (an explanation template):

// Example: discuss trade-offs for "what-is-`loading.tsx`-in-the-app-router-and-how-"
function explain() {
  // Start from the core idea:
  // `loading.tsx` provides a route‑segment loading UI that is shown while the segment is being
}

Common pitfalls

  • Too generic: no concrete trade-offs or examples.
  • Mixing average-case and worst-case (e.g., complexity).
  • Ignoring constraints: memory, concurrency, network/disk costs.

Interview follow-ups

  • When would you choose an alternative and why?
  • What production issues show up and how do you diagnose them?
  • How would you test edge cases?

Related questions

Next.js
App Router data fetching: what do `cache: 'no-store'` and `revalidate` change?
#nextjs#fetch#cache
Next.js
Static vs dynamic rendering in the App Router: what makes a route dynamic?
#nextjs#rendering#static
Next.js
`next/link` prefetching: what does it do and how can you control it?
#nextjs#link#prefetch
Next.js
Middleware in Next.js: what is it good for and what are its limitations?
#nextjs#middleware#edge
Next.js
Route Handlers in the App Router: how do you define them and what are they used for?
#nextjs#route-handlers#api
Next.js
Cache invalidation: what do `revalidatePath` and `revalidateTag` do?
#nextjs#cache#revalidate