Ответ
SSR (Server-Side Rendering)
Рендеринг на сервере. Сервер генерирует HTML и отправляет клиенту готовую страницу. Плюсы: SEO, быстрая загрузка. Минусы: нагрузка на сервер.
CSR (Client-Side Rendering)
Рендеринг в браузере. Сервер отправляет пустой HTML и JS, который строит интерфейс. Плюсы: интерактивность. Минусы: медленная загрузка, проблемы с SEO.
SSG (Static Site Generation)
Предварительный рендеринг. HTML генерируется на этапе сборки. Плюсы: скорость, SEO. Минусы: не подходит для динамического контента.
ISR (Incremental Static Regeneration)
Гибрид SSG и SSR. Страницы генерируются статически, но могут обновляться через заданные интервалы. Пример в Next.js:
export async function getStaticProps() {
return {
props: { data },
revalidate: 60 // Обновление каждые 60 сек
}
}Hydration
Процесс "оживления" статического HTML с помощью JS после загрузки (используется в SSR/SSG).
Ответ 18+ 🔞
А, слушай, вот эта вся хуйня с рендерингом, блядь! Сидишь такой, думаешь: ну что за пиздец, почему сайт тормозит, как говно в проруби? А оказывается, всё дело в том, где эту херню рисовать-то.
Вот смотри, есть, блядь, SSR (Server-Side Rendering). Это когда твой сервер, бедолага, сам всё делает. Берет данные, хуяк-хуяк, собирает из них готовую HTML-страницу и тебе, ленивой жопе в браузере, отправляет уже готовенькую. Плюсы? Ну, поисковики её обожают, SEO просто охуенное. И грузится быстро, потому что тебе уже всё привезли, как пиццу. Минусы? Да серверу пиздец как тяжело, если народу много набежит — он просто ляжет и будет стонать, как Герасим над Муму.
А есть полная противоположность — CSR (Client-Side Rendering). Тут сервер — похуист конченый. Он тебе шлёт пустой HTML-файл, пачку JS-скриптов и говорит: «На, ебал тебя в сраку, сам собирай!». И твой браузер, бедный, начинает эту хуйню строить у себя. Плюс? Ну, когда всё загрузилось — сайт быстрый и интерактивный, кнопочки жмутся. Минусы? Первая загрузка — пиздец как долго. И поисковики приходят, смотрят на пустую страницу и такие: «Ну и хуй с тобой», SEO — ноль ебать.
Дальше, умные ребята подумали: а зачем каждый раз серверу ебашить? Давайте один раз соберём и всё! Так появился SSG (Static Site Generation). Это как печать книг тиражом. На этапе сборки проекта генерируются все HTML-страницы, складываются на хостинг и раздаются всем, как конфетки. Скорость — космос, SEO — огонь. Но, блядь, если у тебя контент меняется каждую секунду (как цены на доллар), то это не вариант. Ты ж не будешь книгу заново печатать из-за каждой новости.
И вот, нате вам — ISR (Incremental Static Regeneration). Это хитрая жопа, гибрид, ёпта! В Next.js, например, это выглядит так: страницы генерируются статически, но ты можешь сказать — «эй, чувак, раз в N секунд проверяй, не поменялось ли чего, и если поменялось — сгенерируй заново». Гениально и просто, как хуй с горы.
export async function getStaticProps() {
return {
props: { data },
revalidate: 60 // Обновляй эту хрень каждые 60 секунд, не еби мозг
}
}И последний важный термин — Hydration (или гидрация, если по-пацански). Представь: сервер тебе присылает красивую, готовую HTML-страницу (спасибо SSR или SSG). Она сразу отображается — ура! Но это же просто картинка, статичная. А чтобы кнопки нажимались и формы работали, нужно эту статичную хуйню «оживить». Вот этот процесс, когда подгруженный JavaScript натягивает на статичный HTML свою логику, события и прочую динамику, и называется гидрацией. Без неё твой быстрый сайт превратится в тыкву — смотреть можно, а тыкнуть никуда нельзя.
Вот и весь сказ, блядь. Выбирай подход под задачу, а не просто потому что модно. Иначе будет как у того немого — сил дохуя, а сказать нихуя не можешь.