Ответ
SSR (Server-Side Rendering) и CSR (Client-Side Rendering) — это два подхода к рендерингу веб-приложений.
SSR:
- Рендеринг происходит на сервере, готовый HTML отправляется клиенту.
- Лучше для SEO, так как поисковые боты видят готовый контент.
- Быстрая первоначальная загрузка страницы.
- Пример: Next.js, Nuxt.js.
CSR:
- Рендеринг происходит в браузере с помощью JavaScript.
- Первоначальная загрузка может быть медленнее (пустой HTML + загрузка JS).
- SEO сложнее, но можно решить с помощью динамического рендеринга.
- Пример: React, Vue без SSR.
Гибридный подход (SSG, ISR):
- Статическая генерация на сервере + гидрация на клиенте.
- Next.js поддерживает оба режима.
Пример SSR в Next.js:
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
function Page({ data }) {
return <div>{data.title}</div>;
}