Question library
Explained questions for the decisions developers make.
Local state vs Redux/Zustand vs server state?
Local state belongs to a nearby component, a client store coordinates shared UI data, and server state represents data owned by a remote service. Server-state tools manage freshness, fetching and invalidation because the browser is only keeping a cached copy. Choosing the owner first prevents duplicated and conflicting sources of truth.
How do I make a slow React page faster?
Frontend performance includes initial loading, responsiveness during interaction and the cost of updating the UI. A slow page might be waiting for JavaScript, network data, layout or expensive component calculations. Profiling tells you which category matters before you make a targeted change.
App Router vs Pages Router?
Next.js provides two routing systems: the Pages Router organizes page files, while the App Router uses nested route segments, layouts and React Server Components. They have different data-fetching and rendering conventions. Knowing which router a project uses prevents mixing APIs and assumptions from different architectures.
Server Component vs Client Component?
A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.
SSR vs CSR vs SSG vs ISR?
SSR, CSR, SSG and ISR describe when and where page content is generated. SSR renders for requests, CSR builds UI in the browser, SSG generates static content ahead of requests, and ISR refreshes generated content after deployment. The choice trades freshness, server work, cacheability and initial loading behavior.
What are streaming and Suspense?
Streaming sends ready parts of a response while slower parts are still being prepared. Suspense defines a boundary that can show fallback UI while compatible child work is pending. Together they let users see useful content sooner instead of waiting for the slowest section to finish.
Route handler vs Server Action vs middleware/Proxy?
Route handlers expose HTTP endpoints, Server Actions provide server-side functions for mutations, and middleware/Proxy can intercept requests for routing behavior. They are different entry points with different responsibilities. An action or handler exposed through the app must still validate input and enforce access near the protected work.
How should caching and revalidation work?
Caching saves a previously computed or fetched result so it can be reused, while revalidation refreshes or invalidates that stored result. A cache design needs a key, a freshness rule and a plan for changes. In Next.js there can be several caching layers, so one invalidation mechanism may not describe every layer's behavior.
How do I prevent stale search results?
Stale search results occur when requests finish in a different order from the user's inputs. A request for an older search can overwrite newer results unless the component checks which request is still relevant. Debouncing reduces request frequency but does not guarantee completion order.
How should I secure and organize a frontend?
Frontend architecture organizes components, data access and state so a feature can be understood and changed without tracing the whole app. Security defines which data and actions each user may access, and the backend must enforce it independently of visible controls. A clear API layer and explicit loading/error states also make failures easier to handle consistently.
What should I check before deploying Next.js?
Deploying Next.js means matching the application's rendering and server features with the hosting environment. A static export cannot provide every capability that requires a running server. Configuration, secrets, cache behavior and protected-route handling must therefore be checked in the actual deployment mode.
How should I start a system design answer?
System design is the process of choosing components, data flows and trade-offs that meet a product's requirements. It starts with what users need and the scale and failure conditions the system must handle. A design is easier to evaluate when assumptions are explicit instead of hidden behind a list of technologies.
Monolith vs modular monolith vs microservices?
A monolith is deployed as one application, a modular monolith keeps clear internal feature boundaries within that deployment, and microservices are independently deployable services. These choices affect how teams change code, scale workloads and handle failure. Microservices reduce some coupling but introduce network calls, distributed data and operational coordination.
What are layered, clean and hexagonal architecture?
Layered architecture separates responsibilities such as HTTP handling, business rules and persistence. Clean and hexagonal architecture emphasize keeping core business decisions independent of frameworks and external systems. Ports describe what the core needs, and adapters implement those contracts for a particular database or service.
What are DDD, SOLID and dependency inversion?
Domain-driven design models software around business concepts and their boundaries. SOLID is a group of design principles for keeping responsibilities focused and dependencies manageable. Dependency inversion is one of those principles: high-level business policy depends on an abstraction rather than a particular low-level implementation.
What makes a good REST API?
A REST-oriented API exposes resources through consistent HTTP operations and representations. A useful API contract explains identifiers, input rules, outcomes, errors and pagination so clients do not need to guess. The goal is predictable behavior and evolvable interfaces, not forcing every business operation into a simplistic CRUD shape.
How do I choose SQL vs MongoDB?
Relational databases organize data into related tables with constraints, while MongoDB organizes records as documents that can embed related values. The choice should follow transaction boundaries, relationships, queries and operational needs. Both can scale and both can fail under poor data modeling or inefficient access patterns.
Vertical vs horizontal scaling?
Vertical scaling adds resources to one machine, while horizontal scaling adds machines and distributes requests or data. Horizontal scaling improves capacity only if work can be shared without losing correct state coordination. Stateless request handlers are easier to spread, but databases, sessions and background work may still need special handling.
Difficulty is an editorial estimate. Completion means you chose to mark a question as understood.