Next.js & React
Server-Side Rendering (SSR)
What It Is
Generating HTML on the server before sending to the browser
Analogy
Cooking the meal in the kitchen before bringing it to the table, rather than cooking at the table
Try It Out
SSR vs CSR
Server-Side (SSR)
1Server renders HTML
2Send complete page
3Fast initial load
Client-Side (CSR)
1Send empty shell
2JavaScript loads
3Browser renders
Related Terms in Next.js & React
Framework
A food truck that comes with the kitchen already set up — you just add your recipes
Component
LEGO blocks — each one is self-contained, and you combine them to build something bigger
Props
Instructions given when you delegate a task — "here's what you need to know"
State
The current mood of your restaurant — busy, slow, sold out — and the sign you flip accordingly