В чем разница между SSR и CSR

SSR (Server-Side Rendering) — рендеринг происходит на сервере. Сервер генерирует HTML и отправляет его клиенту. Плюсы: быстрая загрузка, SEO-дружелюбность. Минусы: нагрузка на сервер, медленные интеракции.

CSR (Client-Side Rendering) — рендеринг происходит в браузере. Сервер отправляет пустой HTML и JS, который рендерит контент. Плюсы: быстрые интеракции после загрузки. Минусы: медленная начальная загрузка, проблемы с SEO.

Пример SSR (Next.js):

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

Пример CSR (React):

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => setData(data));
}, []);