Create: Update:
В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.
Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.
<div id="app"></div>
<script src="bundle.js"></script>
Приложение становится очень интерактивным после инициализации.
Основная работа выполняется на клиентской стороне.
Легко добавлять сложные интерактивные компоненты.
Пользователь видит пустую страницу, пока загружается JavaScript и данные.
Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.
Больше ресурсов требуется на стороне клиента.
Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.
npm run build
HTML статичен и отдается сервером без обработки.
Поисковые системы могут легко индексировать готовый HTML.
Все вычисления выполняются заранее (во время сборки).
Для обновления нужно заново пересобирать сайт, что может занимать много времени.
Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.
Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (
revalidate). После этого сервер пересоберет страницу и кэширует ее.export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}Страницы отдаются как статические, но обновляются при необходимости.
Удобно для контента, который редко обновляется.
Поисковики видят статические страницы.
Нужно управлять кэшированием и интервалами обновления.
Если обновления контента слишком частые, ISR может не подойти.
Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.
Боты получают готовый HTML.
Пользователи получают интерактивные страницы через CSR.
Нужно отслеживать запросы и разделять их.
Генерация страницы на сервере может занять время.
Ставь 👍 и забирай 📚 Базу знаний
