Knowledge base

NextJs

Rendering

• fetch data with useEffect() --> client side render: learn Nextjs
• "Every page is prerendered by default"
• SSR: generate html for EACH request
• hydration: attach event handlers to buttons
• "opt to SSR pages with getServerSideProps"
• SSR + CDN caching, fast for the second user. Cache control header: Cache-Control: max-age=<seconds>, (wont refresh after unless a user comes?)

CDN / Cache

• CSS + JS assets that is put on CDN has infinite max-age, but you want to update it when you redeploy. Done by hashing the asset "name/url". Does not work for normal pages since we want to use the same url.
• max-age in browser, s-maxage in CDN. dont use big max-age since the user's content cannot be force updated (I guess it is not an issue for new users).

when to use what: good demos

• SSR - ecommerce page
• SSG - blog - static or does not update often "headless CMS", renders once on build time?
• CSR - just text from source code(?) - no, that is still SSG, its e.g useEffect().
• SWR - client side fetching - works nice with SSG
• ISR - incremental static regeneration - SSG but rebuild periodically

Routing

• pages/api/x are used by clients docs.
• pages/server/x are used by middleware etc: docs.