SSR vs SSG vs CSR і де тут Next.JS

❓Як з'ясувалося, є деяке нерозуміння що таке і чим відрізняються Client Side Rendering від Server Side Rendering та Static Site Generators.

Відмінність проста, але принципова.

👉 CSR - контент який ви бачите створюється на клієнті (прямо у вашому браузері)
👉 SSR - контент створюється на сервері, прямо під час вашого запиту
👉 SSG - контент створюється лише під час білду і не змінюється до наступного білду.

Відповідно:

1️⃣ CSR - довго, не дружить з SEO, актуальні дані, зручна навігація
2️⃣ SSR - швидше, дружить з SEO, актуальні дані, складніше
3️⃣ SSG - дуже швидко, дружить з SEO, потрібен новий деплой щоб оновити дані.

👉А #NextJS тут до того, що він може працювати в будь-якій моделі, хоча за замовчуванням він працює саме в моделі Server Side Rendering і орієнтований на неї.

👾Цікавий факт, що ми починали з SSG, потім перейшли на SSR, потім на CSR і зараз знову повертаємось до SSR, але з можливостями CSR. Історія, як завжди, йде по спіралі.

@reactbeginners