Frontend | Вопросы собесов

📌 В чем отличие между серверным рендерингом и спа?



💬 Спрашивают в 3% собеседований



Серверный рендеринг (Server-Side Rendering, SSR) и одностраничные приложения (Single Page Applications, SPA) — это два различных подхода к созданию веб-приложений, каждый из которых имеет свои преимущества и недостатки. Рассмотрим их основные отличия.



🤔 Серверный рендеринг (SSR)



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



➕ Сервер получает запрос от клиента, обрабатывает его, собирает необходимые данные, рендерит HTML и отправляет его обратно клиенту.



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



1️⃣ Улучшение SEO:



➕ Поисковые системы получают полностью отрендеренную HTML-страницу, что облегчает индексацию контента.



2️⃣ Быстрый первый рендер (Time to First Paint):



➕ Пользователь видит содержимое страницы быстрее, так как браузер получает готовый HTML.



3️⃣ Совместимость с более старыми браузерами:



➕ Серверный рендеринг не требует от клиента выполнения сложного JavaScript-кода.



🤔 Недостатки:



1️⃣ Нагрузка на сервер:



➕ Сервер должен обрабатывать каждый запрос и рендерить HTML, что может увеличить нагрузку на сервер при большом количестве запросов.



2️⃣ Медленное взаимодействие после первого рендера:



➕ Каждое взаимодействие с приложением может потребовать полного обновления страницы, что делает взаимодействие медленнее и менее плавным.



🤔 Пример:



➕ Next.js для React.



🤔 Одностраничные приложения (SPA)



➕ В нем вся необходимая логика и компоненты загружаются на клиенте единожды при первой загрузке. После этого приложение взаимодействует с сервером через AJAX-запросы, загружая только необходимые данные.



➕ Обновляют контент динамически без перезагрузки всей страницы.



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



1️⃣ Быстрое взаимодействие после первой загрузки:



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



2️⃣ Лучшая пользовательская опыта (UX):



➕ Плавные переходы и обновления контента без перезагрузки страницы.



3️⃣ Реактивное взаимодействие:



➕ Возможность реализации сложных пользовательских интерфейсов с высоким уровнем интерактивности.



🤔 Недостатки:



1️⃣ SEO-проблемы:



➕ Поисковые системы могут иметь сложности с индексацией контента, который загружается динамически.



2️⃣ Долгое время первой загрузки (Initial Load Time):



➕ Первоначальная загрузка может быть медленной, так как необходимо загрузить весь JavaScript-код приложения.



3️⃣ Совместимость с браузерами:



➕ Требует современных браузеров и может не работать в старых или менее популярных браузерах без полифиллов.



🤔 Пример:



➕ React с использованием React Router для маршрутизации.



➕ Vue.js с использованием Vue Router.



➕ Angular.



🤔 Гибридные подходы



Некоторые современные фреймворки поддерживают гибридный подход, совмещая преимущества SSR и SPA. Например, Next.js для React позволяет рендерить начальную загрузку на сервере для улучшения SEO и времени до первого рендера, а затем переключаться на SPA для интерактивных взаимодействий.



SSR с Next.js (React):

// pages/index.js

import React from 'react';



const HomePage = ({ data }) => (

  <div>

    <h1>Home Page</h1>

    <p>{data}</p>

  </div>

);



export async function getServerSideProps() {

  const res = await fetch('https://api.example.com/data');

  const data = await res.json();



  return {

    props: { data },

  };

}



export default HomePage;

➕ Серверный рендеринг (SSR): Генерирует HTML на сервере и отправляет его в браузер. Обеспечивает лучшее SEO и более быстрый первый рендер, но может увеличить нагрузку на сервер и иметь более медленное взаимодействие после первого рендера.



➕ Одностраничные приложения (SPA): Загружают и выполняют весь JavaScript на клиенте, обеспечивая быстрые и плавные взаимодействия после начальной загрузки, но могут иметь проблемы с SEO и более долгое время первой загрузки.



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



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