| Strategy | Speed | SEO | Server Cost | Freshness | Best Use Case |
|---|---|---|---|---|---|
| CSR | ❌ Slow initial | ❌ Poor | ✅ Low | ✅ Real-time | Dashboards |
| SSR | ⚖️ Medium | ✅ Excellent | ❌ High | ✅ Real-time | Dynamic SEO pages |
| SSG | ✅ Fastest | ✅ Excellent | ✅ Very low | ❌ Static | Marketing/content |
| ISR | ✅ Fast | ✅ Excellent | ✅ Low | ⚖️ Semi-fresh | CMS / large sites |
When: Server HTML ≠ Client-rendered result Example
export default function Page() {
return <div>{Math.random()}</div>;
}
Server: 0.123 Client: 0.987 → ❌ mismatch → React warning
const [value, setValue] = useState(null);
useEffect(() => {
setValue(Math.random());
}, []);
if (typeof window === "undefined") return null;
const Component = dynamic(() => import('./Component'), { ssr: false });
Which statements are TRUE about CSR?
Select all that apply:
A. Initial HTML already contains full content
B. SEO is generally worse compared to SSR/SSG
C. Data fetching typically happens in useEffect or client hooks
D. Server load is usually lower compared to SSR
E. CSR completely avoids hydration
Answer: B C D
Which are TRUE for SSR in Next.js?
Select all that apply:
A. HTML is generated on every request
B. It scales better than SSG for high traffic
C. It improves SEO compared to CSR
D. It eliminates the need for JavaScript in the browser
E. Using cache: 'no-store' in fetch enforces SSR behavior
Answer: A C E
Which are TRUE for SSG?
Select all that apply:
A. Pages are generated at build time
B. Pages are always up-to-date with backend data
C. It works well with CDN caching
D. It is ideal for high-traffic content-heavy pages
E. It requires a server to render on every request
Answer: A C D
Which are TRUE about ISR?
Select all that apply:
A. It allows updating static pages without full rebuild
B. It guarantees users always see the latest data
C. It uses a stale-while-revalidate strategy
D. It is suitable for CMS-driven websites
E. It behaves exactly the same as SSR
Answer: A C D
Which are TRUE about hydration?
Select all that apply:
A. It attaches event listeners to existing HTML
B. It re-renders the entire DOM from scratch every time
C. It happens after JavaScript loads in the browser
D. Hydration mismatch can happen if server and client output differ
E. Hydration is not needed in CSR
Answer: A C D
Which statements are TRUE?
Select all that apply:
A. export const dynamic = 'force-dynamic' forces SSR
B. export const revalidate = 60 enables ISR
C. fetch(..., { cache: 'no-store' }) disables caching
D. revalidate always overrides no-store
E. Rendering strategy in App Router is heavily based on caching
Answer: A B C E
You have:
export const revalidate = 60;
await fetch('/api/data', { cache: 'no-store' });
What is TRUE?
Select all that apply:
A. The route behaves like ISR
B. The route behaves like SSR
C. The page can be fully cached at CDN
D. The no-store fetch forces dynamic rendering
E. revalidate still controls the page behavior
Answer: B D
Which are GOOD practices for high-traffic frontend systems?
Select all that apply:
A. Prefer SSG/ISR when possible
B. Use SSR for every page to ensure freshness
C. Use CDN caching aggressively
D. Minimize JavaScript bundle size
E. Always fetch data on client side
Answer: A C D
You’re building a travel website (like Kensington Tours):
Destination pages (rarely change)
Search results (real-time)
User dashboard (private)
Which strategies fit best?
Select all that apply:
A. Destination pages → SSG/ISR
B. Search results → SSR or CSR
C. Dashboard → CSR
D. Dashboard → SSG
E. Destination pages → SSR only
Answer: A B C
Which statements show senior-level understanding?
Select all that apply:
A. Rendering strategy is mainly a caching decision in Next.js
B. SSR is always better than SSG
C. Hydration cost can impact performance on low-end devices
D. Reducing JS is important even when using SSR
E. ISR is always safe for personalized content
Answer: A C D