Что такое SSR? Его преимущества и гидратация

SSR, или рендеринг на стороне сервера (Server-Side Rendering), — это метод, используемый в веб-разработке, при котором сервер обрабатывает код React или другого фреймворка JavaScript и генерирует HTML на стороне сервера, отправляя полностью отрендеренный HTML в браузер клиента.

Вот краткий обзор процесса SSR:

Запрос от клиента: Когда пользователь отправляет серверу запрос на веб-страницу, сервер получает запрос.
Обработка на стороне сервера: Вместо отправки пустой HTML-оболочки или минимального документа сервер выполняет JavaScript-код, связанный с запрошенной страницей, извлекает данные, если это необходимо, и отображает весь HTML-контент на стороне сервера.
Отправка обработанного HTML-кода клиенту: Полностью отрендеренный HTML-код, а также все необходимые CSS и JavaScript отправляются в качестве ответа браузеру клиента.
Обновление на стороне клиента: Как только HTML-код получен браузером, выполняется любой JavaScript-код, необходимый для интерактивных элементов или дальнейшего рендеринга на стороне клиента. Этот процесс известен как “гидратация”.

Преимущества SSR:

Улучшенная производительность: Пользователи видят контент быстрее, особенно на устройствах с медленным интернет-соединением.
Улучшенный SEO: Поисковые системы могут эффективно индексировать полностью отрендеренный контент, что улучшает видимость сайта в поисковых результатах.
Первоначальная загрузка: Сервер отправляет полностью отрендеренный HTML, что ускоряет первоначальную загрузку страницы.

Next.js упрощает процесс SSR с помощью функции getServerSideProps. Вот пример:

import Head from 'next/head';
 
const SamplePage = ({ data }) => {
  return (
    <div>
      <Head>
        <title>Sample Page</title>
      </Head>
      <h1>Sample Content</h1>
      <p>{data}</p>
    </div>
  );
};
 
export async function getServerSideProps() {
  // Выполните необходимые запросы данных
  const data = 'Some server-rendered data';
  return { props: { data } };
}
 
export default SamplePage;

В этом примере:

Функция getServerSideProps выполняется на сервере и обеспечивает данные для компонента SamplePage перед его рендерингом.
Данные передаются в компонент в виде пропсов, что позволяет отобразить их сразу после загрузки страницы.

Гидратация:

После того как сервер отправил отрендеренный HTML, клиентский JavaScript берет на себя управление.

Этот процесс включает:

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

Пример использования компонента Link в Next.js:

import Link from 'next/link';
 
const Navigation = () => {
  return (
    <nav>
      <Link href="/about">
        <a>About</a>
      </Link>
      <Link href="/contact">
        <a>Contact</a>
      </Link>
    </nav>
  );
};
 
export default Navigation;

В этом примере:

Компонент Link обеспечивает эффективную навигацию внутри приложения, сочетая серверный рендеринг с последующими обновлениями на клиенте.

Оптимальный пользовательский опыт:

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

Навигация

Что такое SSR? Его преимущества и гидратация

Упоминания со ссылкой