Что такое SSR в JavaScript

Вопрос

Что такое SSR в JavaScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает принципы SSR, его преимущества перед CSR, а также знает, когда и зачем его использовать. Важно упомянуть связь с SEO, производительностью и популярными фреймворками (Next.js, Nuxt.js).

Ключевые тезисы

• SSR (Server-Side Rendering) — это техника рендеринга веб-приложений на сервере, а не в браузере. Это означает, что сервер отправляет клиенту полностью готовую HTML-страницу.
• Основная цель SSR — улучшение SEO и ускорение первоначальной загрузки страницы, так как поисковые боты и браузеры получают готовый контент сразу.
• SSR особенно полезен для статических или полустатических сайтов, где контент не меняется часто. Примеры технологий: Next.js (для React), Nuxt.js (для Vue).
• В отличие от CSR (Client-Side Rendering), SSR уменьшает время до первого отображения контента (First Paint), но может увеличивать нагрузку на сервер.

Подробный ответ

SSR (Server-Side Rendering) — это метод рендеринга веб-приложений, при котором HTML-страница генерируется на сервере и отправляется клиенту в готовом виде. Это отличается от Client-Side Rendering (CSR), где браузер загружает минимальный HTML и затем строит интерфейс с помощью JavaScript. Основное преимущество SSR — улучшение SEO, так как поисковые боты получают готовый контент, а не пустую страницу, которую нужно обрабатывать. Кроме того, SSR ускоряет First Paint (первое отображение контента), что улучшает пользовательский опыт, особенно на медленных устройствах или соединениях. Однако SSR увеличивает нагрузку на сервер, так как каждый запрос требует генерации HTML, и может замедлить Time to Interactive (TTI), если JavaScript ещё не загрузился или не выполнился. SSR идеально подходит для статических или полустатических сайтов, таких как блоги, новостные порталы или маркетплейсы, где контент не меняется часто, но важно быстрое отображение и хорошая индексация.

Практические примеры

Пример 1

Пример использования SSR в Next.js: при создании страницы с помощью getServerSideProps, сервер генерирует HTML на каждом запросе. Например, страница блога, которая получает данные из API и рендерит их в HTML перед отправкой клиенту:

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

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Пример 2

Пример динамического SSR: в Next.js можно использовать getServerSideProps с параметрами маршрута. Например, страница товара в интернет-магазине, где данные зависят от ID:

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();
  return { props: { product } };
}

function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

Частые ошибки

• Игнорирование нагрузки на сервер: SSR может привести к повышенной нагрузке, особенно при высоком трафике. Кандидаты часто забывают про кэширование или использование гибридных подходов (например, Static Generation в Next.js).
• Путаница между SSR и Static Site Generation (SSG): SSR генерирует HTML при каждом запросе, а SSG — во время сборки. Кандидаты иногда не понимают разницы и выбирают неподходящий метод.

Связанные темы

• Static Site Generation (SSG) — рендеринг страниц во время сборки, а не при запросе. Подходит для полностью статических сайтов.
• Client-Side Rendering (CSR) — рендеринг в браузере с помощью JavaScript. Используется в SPA (Single Page Applications).
• Hydration — процесс «оживления» статического HTML, полученного через SSR или SSG, с помощью JavaScript на клиенте.

Follow-up вопросы

Какие преимущества SSR перед CSR?

Уровень: basic

SSR улучшает SEO, ускоряет первоначальную загрузку страницы и обеспечивает лучшую производительность на слабых устройствах, так как сервер отправляет готовый HTML.

Какие недостатки SSR?

Уровень: basic

SSR увеличивает нагрузку на сервер, требует больше ресурсов для обработки запросов и может быть сложнее в реализации, особенно для динамических приложений.

Как SSR влияет на время до первого взаимодействия (TTI)?

Уровень: intermediate

SSR может увеличить TTI, так как браузеру нужно загрузить и выполнить JavaScript после получения готового HTML, что может замедлить интерактивность страницы.

Какие технологии или фреймворки поддерживают SSR?

Уровень: intermediate

Next.js для React, Nuxt.js для Vue, Angular Universal для Angular. Эти фреймворки упрощают реализацию SSR.

Как SSR работает с динамическими данными?

Уровень: advanced

SSR может рендерить динамические данные на сервере, используя API или базы данных. Это позволяет отправлять актуальный контент клиенту при первом запросе.