Что такое ssr

SSR (Server-Side Rendering) — это технология рендеринга веб-страниц на сервере, а не на клиенте. В контексте современных JavaScript-фреймворков, таких как React или Vue.js, это означает, что HTML-код страницы генерируется на сервере и отправляется в браузер уже готовым для отображения. Это отличается от традиционного подхода клиентского рендеринга (Client-Side Rendering, CSR), где HTML генерируется непосредственно в браузере с использованием JavaScript.

Основные особенности и преимущества

1. Улучшение производительности и скорости загрузки:

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

2. Лучшая поддержка SEO:

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

3. Улучшенное восприятие пользователем (First Paint):

  • Пользователи видят контент быстрее, так как сервер отправляет уже готовую HTML-разметку.

Как он работает

1. Запрос от клиента:

  • Браузер отправляет запрос на сервер для получения страницы.

2. Генерация HTML на сервере:

  • Сервер запускает JavaScript-код для рендеринга компонента или всей страницы.
  • Сервер генерирует HTML-код и отправляет его клиенту.

3. Отображение страницы в браузере:

  • Браузер получает готовую HTML-страницу и отображает её.
  • Затем JavaScript-фреймворк (например, React или Vue) «гидрирует» страницу, то есть связывает готовую HTML-разметку с JavaScript-кодом, чтобы сделать страницу интерактивной.

Next.js — популярный фреймворк для React, который поддерживает SSR из коробки.

1. Установка Next.js:

   ```bash
   npx create-next-app my-ssr-app
   cd my-ssr-app
   npm run dev
   ```

2. Создание страницы с SSR:

   ```javascript
   // pages/index.js
   import React from 'react';

   const Home = ({ data }) => {
     return (
       <div>
         <h1>Server-Side Rendering Example</h1>
         <p>{data.message}</p>
       </div>
     );
   };

   // Эта функция вызывается на сервере при каждом запросе к странице
   export async function getServerSideProps() {
     // Выполняем запрос к API или базе данных
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();

     // Передаем данные как пропсы в компонент
     return {
       props: {
         data
       }
     };
   }

   export default Home;
   ```

В этом примере Next.js использует функцию `getServerSideProps` для получения данных на сервере перед рендерингом страницы. Эти данные затем передаются в компонент как пропсы и используются для генерации HTML.

SSR (Server-Side Rendering) — это процесс рендеринга веб-страниц на сервере, а не в браузере. Это улучшает производительность, SEO и восприятие пользователем за счет отправки готового HTML-кода с сервера.

June 1, 2024, easyoffer

Примеры ответов: