Advanced everything in Frontend Dev, page 13
Next.js Instrumentation: Code That Runs on Server Startup
Next.js's instrumentation.ts file runs code once when your server process starts, before any requests. It's ideal for setting up global logging, monitoring like OpenTelemetry, or database connections.
Next.js Draft Mode: Previewing Static Content
Next.js Draft Mode bypasses static pages to preview unpublished content from a headless CMS. It's for content editors who need to see changes live before publishing. The footgun is security: a leaked secret token exposes all draft content.
Handling CORS in Next.js API Routes
CORS isn't a global config; it's a per-route response header. To allow cross-origin requests to your API, you must manually set headers like Access-Control-Allow-Origin in your Route Handlers, including handling preflight OPTIONS requests.
Next.js Runtimes: Edge vs. Node.js
Choose your server environment in Next.js: a fast, limited Edge function or a powerful Node.js backend. Use the Edge for low-latency tasks like auth checks; stick with Node.js for its full API set and heavier computation.
Partial Prerendering (PPR): Static Speed for Dynamic Pages
Partial Prerendering serves a static page shell instantly, then streams in dynamic parts. It's like getting a pre-built house frame immediately, with custom rooms delivered and slotted in as they're finished.
Next.js Route Segment Config
Think of Next.js Route Segment Config as per-route dials for runtime, caching, and timeouts. Use it to run a specific API route on the Edge for speed or increase the timeout for a data-heavy page. The footgun: settings don't cascade to child routes.
Next.js Intercepting Routes: Modals on Rails
Intercepting routes let you show one route's content inside another's layout, like a photo modal over a gallery feed. It's ideal for shareable modal URLs. The footgun: a page refresh or direct navigation bypasses the interception, rendering the full page.
Next.js Parallel Routes: Multiple Pages in One View
Parallel Routes render multiple independent pages within a single layout, like a split-screen dashboard. This is ideal for complex UIs where different sections need to load and be managed separately.
Next.js Caching: When and How to Revalidate Data
Next.js aggressively caches data by default. Revalidation is how you tell it the data is stale, either after a set time or on-demand after a mutation. The footgun is forgetting fetch is cached; use revalidatePath or revalidateTag to bust the cache.
cy.intercept: Control Network Traffic in Cypress Tests
cy.intercept acts like a programmable proxy in your Cypress tests, letting you watch, modify, or fake network requests. Use it to test loading states or error handling without a live backend. Footgun: intercepts are cleared before each test, not just once.
MSW: Mock APIs at the Network Layer
Mock Service Worker intercepts API calls at the network level using a Service Worker, so your app makes real requests. Use it for consistent mocking in development, testing, and Storybook.
RTK Query: Your Redux Data Fetching Layer
RTK Query treats server data as a cache, not global state, handling fetching and loading states for you. Use it to replace manual fetch logic and keep data fresh across components. Forgetting to call setupListeners disables automatic refetching.
SSR State Hydration: Syncing Server and Client State
SSR hydration syncs server and client state to prevent UI errors. The server renders the page with initial data, then sends that data to the client to "hydrate" its own state store. The footgun is using a global store on the server, which leaks data.
State Normalization: Treat Your Store Like a Database
Treat your Redux state like a database. Instead of nesting related data, flatten it into separate 'tables' keyed by ID. This simplifies updates and prevents unnecessary re-renders. The footgun is storing API data as-is, creating update bugs.
ISR: Static Speed with Dynamic Freshness
ISR offers the speed of a static site with the freshness of a server-rendered one. It serves a cached page, then regenerates it in the background after a set time, making it ideal for blogs or e-commerce sites.
Measure Component Render Costs with <Profiler>
React's <Profiler> is a stopwatch for your components, measuring render times programmatically. Wrap any UI tree to log detailed performance metrics on every update, helping you pinpoint slow renders. The footgun: It's disabled in production by default.
React Refs: An Escape Hatch for DOM Manipulation
A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.
React's useFormStatus: Read Form State from a Child Component
The useFormStatus hook lets a child component read its parent form's submission status without prop drilling. Use it to disable a submit button or show a loading spinner from within a reusable component.
useFormState (now useActionState): State for Actions
useActionState (formerly useFormState) lets you update state from an async Action. It returns the action's result, a dispatch function, and a pending status. Use it to manage form UI for loading states and validation messages from Server Actions.
SSR for Styles: Avoiding the 'Flash'
Server-side rendering for styles sends a fully styled page on the first load, preventing the dreaded "flash of unstyled content" (FOUC). This is crucial for CSS-in-JS libraries. The footgun is assuming it works automatically without proper setup.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles