🤔 В чем отличие ssr от csr?

Это два подхода к рендерингу веб-страниц, которые различаются по тому, где происходит рендеринг контента: на сервере или на клиенте.

🚩Различия

🟠Место рендеринга
SSR (Server-Side Rendering): Рендеринг контента происходит на сервере. Сервер генерирует HTML страницу и отправляет её клиенту (браузеру), который отображает готовую страницу.
CSR (Client-Side Rendering): Рендеринг контента происходит на стороне клиента (в браузере). Браузер загружает минимальный HTML и JavaScript файлы, которые затем выполняются для создания и отображения контента.

🟠Время начальной загрузки
SSR: Начальная загрузка может быть быстрее, так как клиент получает готовый HTML и может сразу начать его отображать. Однако последующие взаимодействия могут быть медленнее, так как могут потребовать загрузки дополнительных данных с сервера.
CSR: Начальная загрузка может быть медленнее, так как клиент сначала загружает JavaScript, который затем рендерит страницу. Однако последующие взаимодействия обычно быстрее, так как они обрабатываются на клиенте без полной перезагрузки страницы.

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

🟠Опыт пользователя
SSR: Пользователь видит контент быстрее при первой загрузке страницы, так как сервер отправляет готовый HTML. Однако последующие действия могут быть медленнее из-за необходимости делать запросы на сервер.
CSR: Пользователь может дольше ждать при первой загрузке, но последующие действия обычно быстрее и более интерактивны, так как они обрабатываются на клиенте.

🟠Зависимость от JavaScript
SSR: Менее зависим от JavaScript, так как основной контент генерируется на сервере и доступен даже если JavaScript отключен или не работает.
CSR: Полностью зависит от JavaScript. Если JavaScript отключен или не работает, сайт может не функционировать должным образом.

🚩Пример

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

const Home = ({ data }) => (
  <div>
    <h1>Server-Side Rendered Page</h1>
    <p>{data}</p>
  </div>
);

export async function getServerSideProps() {
  // Fetch data from an API or database
  const data = "This is server-side rendered content";

  return {
    props: {
      data,
    },
  };
}

export default Home;

Ставь 👍 и забирай 📚 Базу знаний