SSR
32 bites tagged SSR — interview questions with model answers, and 60-second explainers.
Server-side data fetching in Nuxt 3?
Use useFetch or useAsyncData to fetch on server, data is serialized and injected into page state, component accesses it as reactive data. understanding Nuxt's data fetching and SSR integration.
Hydration: SSR HTML to interactive app?
Server renders HTML, client JavaScript bootstraps and attaches event listeners (hydration), mismatch occurs if server HTML differs from client render. understanding server rendering and client takeover.
Prerendering vs SSR in SvelteKit: trade-offs?
Prerender generates static HTML at build, SSR renders on each request, prerender wins on speed but requires static data. understanding of build-time vs request-time rendering and its implications.
Runtime CSS-in-JS performance pitfalls in SSR Next.js
Runtime libs serialize styles per render, need style collection on the server, risk FOUC and double work in App Router. Awareness of runtime style cost. Ignoring hydration or recommending runtime CSS-in-JS without caveats.
Preventing theme flash in SSR apps
Flash comes from server not knowing client preference; fix with a blocking inline script setting the theme before paint. SSR hydration and theme timing. setting the theme only in a useEffect after hydration.
Nuxt 4.4 Adds Custom Fetch Factories and Router v5
Nuxt 4.4 ships createUseFetch factories, Vue Router v5, and 28x faster dev route updates. Custom fetch instances with typed defaults cut API boilerplate, while the router upgrade drops unplugin-vue-router and clears the path for stable typed routes.
Vue 3.5 cuts reactivity memory 56%, adds lazy hydration
Vue 3.5 drops reactivity memory 56% and large arrays up to 10x faster with no breaks. Stable reactive props destructure kills withDefaults boilerplate, while lazy hydration and useId() fix SSR pain points.
Angular Universal server memory leak: causes and diagnosis
Incomplete platform destruction, global DOM polyfills, unclosed RxJS; use heap snapshots and --inspect. Angular SSR platform lifecycle in Node.js and cross-request retainers. blaming Angular, not citing request cleanup.
Pass server state to client in Nuxt and name the composable
This tests Nuxt SSR state hydration. A strong answer names useState, explains server values serialize to JSON for client hydration, and warns against refs defined outside setup.
Compare SSR, SSG, and ISR trade-offs in meta-frameworks
What it tests: matching rendering modes to build time, freshness, and scale. Outline: contrast SSR per-request cost with SSG fast CDN delivery but stale content and long builds, then show ISR as lazy regeneration post-deploy.
Explain server.ts and main.ts in Angular Universal
Server.ts SSRs initial HTML via Node/Express; main.ts bootstraps the browser app and hydrates the DOM. First request hits the server; later navigations are client-side only. Angular SSR entry points and hydration.
What is SSR and what are its advantages over a client-side SPA?
This tests server-client rendering trade-offs. A strong answer defines SSR as server HTML generation plus client hydration, citing faster time-to-content, better SEO for async data, and unified component logic.
Shadow DOM vs build-time scoping for third-party widgets
Shadow DOM gives true isolation but blocks global theming and complicates SSR; build-time scoping keeps theming and SSR simple but needs tooling. Your grasp of style encapsulation tradeoffs in widgets.
Would you use getServerSideProps or getStaticProps for private user data?
Tests SSR vs SSG privacy. Use getServerSideProps: it runs per-request with auth cookies. getStaticProps bakes HTML/JSON at build time, leaking private data across users. Red flag: suggesting ISR or revalidation for authenticated data.
What is state hydration in Next.js SSR with Redux or Zustand?
Hydration attaches listeners to server HTML; serialize state to an escaped script tag; boot client store before React or markup is discarded. React hydration and server-to-client store serialization.
How do you handle 404s in React Router and Next.js App Router?
Tests client versus server routing architecture. React Router uses a wildcard route returning HTTP 200 by default; Next.js App Router uses not-found.js for server-rendered 404s. Red flag: confusing the two routers or ignoring status code semantics.
How do you dynamically populate Open Graph and Twitter Card meta tags?
This tests server-side meta injection from article data. A strong answer covers the four required og properties, Twitter Card name-attribute equivalents, and structured image metadata like width, height, alt.
Caching and performance challenges in SSR with personalized copy
Segment-level cache keys, short TTLs with stale-while-revalidate, and edge personalization to protect origin. Cache efficiency versus segment personalization at scale. Per-user cache keys or disabling cache entirely.
Angular Universal: Hybrid Rendering for Faster Apps
Angular Universal enables hybrid rendering, letting you choose where each page is built: on the server (SSR), at build time (SSG), or in the browser (CSR). This improves load times and SEO. The footgun is misconfiguring routes, negating performance gains.
SSR Hydration: Bringing Static Pages to Life
Hydration attaches JavaScript interactivity to a static HTML page sent from a server. It's used in Server-Side Rendering (SSR) frameworks to make the initial fast-loading page interactive.
SvelteKit Prerendering: Build-Time HTML for Faster Sites
SvelteKit prerendering creates static HTML files at build time for instant loads. It's ideal for content that doesn't change per user, like marketing pages or blog posts. The main footgun: unlinked pages won't be found unless you explicitly list them.
Angular: Run Code Only on Browser or Server
Angular Universal runs your app twice: on a server and in a browser. Use `isPlatformBrowser` to run code only where it's safe, like accessing `window` or `document`, to prevent your server-side render from crashing.
Angular TransferState: Avoid Double Data Fetching in SSR
TransferState is a key-value cache that bridges your Angular SSR server and the browser, preventing the client from re-fetching data the server already got. Use it to pass resolved API data from the server render to the client, avoiding wasted network calls.
Nuxt Server Data Fetching: useAsyncData & useFetch
Avoid client-side request waterfalls by fetching data on the server and embedding it in the page. Nuxt's `useAsyncData` and `useFetch` handle this SSR hydration for you. The main footgun: not providing a stable key, leading to re-fetches.
Get SSR bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.