< H / $ > Хак/Собесов

Перейти на PRO

Несовместим ли Server-Side Rendering с клиент-сервером

«Несовместим ли Server-Side Rendering с клиент-сервером» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

SSR и клиент-серверная архитектура совместимы. SSR означает, что сервер генерирует HTML перед отправкой клиенту, но после загрузки страницы клиентский JavaScript может взять управление на себя (гидрация). Это позволяет использовать API, WebSockets и другие клиент-серверные взаимодействия.

Пример с Next.js (SSR + клиентские запросы):

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

function Page({ data }) {
  // Клиентский запрос после гидрации
  const [moreData, setMoreData] = useState(null);
  useEffect(() => {
    fetch('/api/more').then(res => res.json()).then(setMoreData);
  }, []);

  return <div>{/* ... */}</div>;
}