Parallel Routes allow multiple independent `page.tsx` views to coexist under a single URL via named slots (`@slotName`), with each slot having its own dedicated `loading.tsx` and `error.tsx` convention files
By default, a Server Component must finish executing completely before sending down HTML, even if parts of the data are ready much earlier. Isolating slow parts into async child components and wrapping them in `<Suspense>` enables Next.js to stream HTML in chunks.
Time-based revalidation (`revalidate: N`) refreshes data automatically on a schedule but introduces unnecessary latency. `revalidatePath` and `revalidateTag` allow you to proactively trigger cache invalidation immediately when mutations occur, without waiting for the cache timer to expire.
SSR, SSG, and ISR are not three isolated mechanisms in the App Router; rather, they represent different combinations of `fetch()` cache options (covered in the previous section) alongside `generateStaticParams()` and `dynamicParams`.
Next.js caches `fetch()` permanently by default (easily leading to "stale data" bugs), which can be configured using `no-store` or `revalidate: N`. This cache operates exclusively in Server Components; React Query handles caching/polling in Client Components, and both are commonly used in tandem.
Learn the fundamentals of micro-frontend architecture, including why it exists, how it works, common integration approaches, its relationship with Module Federation, monorepos, and Docker, as well as the trade-offs you should consider.
React 19 introduces a smoother way to handle async tasks such as:
Concurrent Rendering (rendering that can be interrupted) is a React mode where it can start rendering a new UI version, pause it if something more urgent comes up (a keystroke, a click), then resume or discard the old work - instead of.
React Fiber is a complete rewrite of React's reconciliation algorithm, introduced in React 16. It improves the rendering process by breaking down rendering work into smaller units, allowing React to pause and resume work
Redux is a popular state-management library for JavaScript applications, especially React. Redux lets you store and manage an application's global state consistently, in a way that's easy to control and debug.
Zustand is a state-management library for React, created by Poimandres. "Zustand" means "state" in German. Its philosophy is to offer a small, fast, unopinionated solution without much boilerplate.
Definition: the Context API is a React feature that lets you pass data through the component tree without manually threading props through every level.
Definition: Custom Hooks are JavaScript functions whose names start with "use" and that may call other Hooks inside them. They let you reuse stateful logic between components without changing the component hierarchy.
Definition: A hook used to add state to a functional component. Returns an array containing the current value and a setter function to update that value.
In a Class Component, the lifecycle is split into 3 main phases:
In React, Components are like independent, reusable building blocks that make up the user interface (UI). Each component manages its own piece of the interface and logic. Instead of building the whole UI in one big file...
Reconciliation in React is the process through which React updates the DOM to match the virtual DOM. When a component's state or props change, React creates a new virtual DOM tree and compares it with the previous one. T
Both Debounce and Throttle are techniques used in JavaScript to improve performance by limiting the number of times a function is executed. They are essential when dealing with events that fire rapidly, such as scrolling
Author: @Tranloi2k
Author: @Tranloi2k
Author: @Tranloi2k
Definition:
Author: @Tranloi2k
Author: @Tranloi2k
In web development, rendering timing refers to the measurement and breakdown of the steps a browser takes to convert your code (HTML, CSS, and JavaScript) into the actual pixels displayed on a user's screen.
A short note on <Link> and prefetching. For the full guide to routing, layouts, searchParams, error.tsx → 1. App Router - In Depth.
Explains why Nova has two auth systems (NextAuth + NestJS JWT), how authFetch / refresh works, and compares it against best practice.
Configuring Auth.js / NextAuth v5 in Nova Shop: file structure, providers, callbacks, JWT session.
The foundation of Authentication (AuthN) and Authorization (AuthZ) before reading 8. NextAuth v5 and 9. JWT Dual Auth.
A document explaining middleware.ts - runs before a request reaches a page, used for auth gating, redirects, and NextAuth v5 integration.
This document explains how Next.js fetches and caches data in the App Router, and how Nova Shop applies it (revalidateTag, revalidatePath, refresh()).
A document explaining app/api/**/route.ts - building HTTP APIs in Next.js (Stripe checkout, webhooks, NextAuth).
A document explaining Server Functions / Server Actions - calling a server function from a form or client without writing /api/... for every mutation.
A document explaining the two component types in the App Router, when to use each, and how Nova Shop splits products/page.tsx (server) vs productForm (client).
A document that ties every topic together (routing, RSC, actions, API, cache, auth) into a practical reading path through the Nova-online-shopping codebase.
Server/Client Components and Hydration
Next.js App Router, File-Based Routing
TypeScript adds a powerful layer of type safety to JavaScript. Here is a breakdown of the core concepts you’ll encounter in interviews and daily development.
In TypeScript, Generics are essentially "variables for types." They allow you to write code that is flexible enough to work with many different types while still maintaining strict type safety.
Optimized tool selectionHere are concise explanations for each concept in JavaScript:
In JavaScript, almost every object has a hidden property called [[Prototype]] (accessible in most browsers via proto).
A closure is a function that "remembers" the scope where it was created, allowing it to access variables from its parent function even after the parent has finished execution.
!Illustration image
Covers: Prototypes & this · Event Loop & Concurrency · Memory & Performance
How WebAssembly runs side by side with JavaScript inside the very same engine - what it's good for, and where the boundary between the two costs you.
"JavaScript is single-threaded" is true in a precise and limited sense - your code runs on one thread, but the engine and host quietly use many.
How JavaScript code gets split across files, linked together, and loaded - and why ES Modules behave differently from the older CommonJS in ways that actually matter.
The engine runs the language; the host provides the APIs you actually build with. Keeping this line clear explains a surprising amount about portability.
How a single-threaded language manages to handle timers, network requests, and file I/O all at once without ever blocking.
How V8 automatically figures out which memory is no longer needed and reclaims it - and why modern GC manages to do this without freezing your program.
Where JavaScript data actually lives - the split between stack and heap, how V8 organizes its heap into generations, and what a "memory leak" even means in a garbage-collected language.
How JavaScript decides which variable a name refers to across nested functions, and how closures keep variables alive long after the function that created them has returned.
The internal environment a piece of JavaScript runs inside - the concept that explains hoisting, the temporal dead zone, this, and the call stack all at once.
What happens the moment the JIT's optimistic assumptions break - and why the truly expensive thing isn't a single deopt but a deopt loop.
How V8 represents arrays through "elements kinds," why packed integer arrays are the fastest thing going, and how a single careless line can permanently slow an array down.
How V8 physically stores an object's properties, what keeps an object on the fast path, and what quietly drops it onto the slow one.
The mechanism that makes a repeated obj.x fast by remembering, right at that spot in the code, where x was found last time.
How V8 gives dynamic, dictionary-like objects the same fast, struct-style property access you'd expect from a statically typed language.
V8's optimizing compiler: it turns hot bytecode plus type feedback into fast native machine code - and gracefully unwinds when its assumptions turn out to be wrong.
V8's baseline tier: it turns the AST into compact bytecode, runs it, and quietly gathers the profiling data that makes everything faster later.
How raw source text becomes a structured tree the engine can execute - and why this stage quietly shapes your app's startup time.
How a JavaScript engine (primarily V8) stores values in memory, and why that single design decision ripples through everything else.
CORS stands for Cross-Origin Resource Sharing. It is a security mechanism implemented by web browsers to prevent a malicious website from accessing data from another website without permission.
In TypeScript, these three types represent different levels of "restriction." Understanding the difference is crucial for maintaining type safety while handling dynamic data.
The State Pattern is a behavioral design pattern that lets an object change its behavior when its internal state changes. The object appears as if it changed its class.
The Singleton Pattern is a creational design pattern.
The Observer Pattern is a behavioral design pattern.
Below is verified information on the Factory Pattern in JavaScript, drawn from reputable sources such as MDN Web Docs, Refactoring Guru - Factory Method, and Addy Osmani - Learning JavaScript Design Patterns.
Choosing where to store an access token is an important decision that directly affects your web app's security. Here is a detailed comparison of the three common approaches.
A set of object-oriented design principles that make code easier to maintain and extend.
A quick comparison of the two API design styles and when to use each.
How to read time/space complexity and why it matters.
