Что такое ssr ?
Спросят с вероятностью 7%

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:

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

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

      // 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-кода с сервера.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых