SSR и CSR

Все темы React Developer

Что такое SSR (Server-Side Rendering) и как он отличается от CSR (Client-Side Rendering)?

SSR (Server-Side Rendering) и CSR (Client-Side Rendering):

SSR (Server-Side Rendering):

• Рендеринг контента на сервере.

• HTML генерируется на сервере и отправляется в браузер.

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

• Пример: Next.js.

CSR (Client-Side Rendering):

• Рендеринг контента на клиенте.

• HTML генерируется в браузере с помощью JavaScript.

• Для первого показа контента обычно нужны загрузка и выполнение JavaScript. Степень интерактивности не определяется выбором CSR или SSR.

• Пример: Create React App.

Основные отличия:

• Производительность:

  • SSR может ускорить показ контента, но зависит от времени ответа сервера и объёма клиентского JavaScript.

  • CSR может задержать первый показ контента; скорость дальнейших переходов зависит от приложения и кеширования.

• SEO:

  • SSR: Улучшенная SEO, так как контент доступен поисковым системам.

  • CSR: Хуже для SEO, так как контент рендерится динамически.

• Сложность:

  • SSR: Более сложная настройка и инфраструктура.

  • CSR: Проще в настройке и развертывании.

Как передать данные с сервера на клиент при использовании SSR в React?

В Next.js Pages Router серверные данные можно передать странице через getServerSideProps. getInitialProps является устаревшим API. В App Router используют серверные компоненты и передают клиентским компонентам сериализуемые пропсы. Секреты и служебные данные в клиентские пропсы не включают.

Пример с getServerSideProps в Next.js:

1. Создайте страницу и реализуйте getServerSideProps:

   import React from "react";
   
   export async function getServerSideProps() {
     // Получение данных на сервере
     const res = await fetch("https://api.example.com/data");
     const data = await res.json();
   
     // Передача данных в компонент через пропсы
     return { props: { data } };
   }
   
   const Page = ({ data }) => (
     <div>
       <h1>Server-Side Rendered Page</h1>
       <pre>{JSON.stringify(data, null, 2)}</pre>
     </div>
   );
   
   export default Page;

Пример с getInitialProps в Next.js (для классовых компонентов или старых версий Next.js):

1. Создайте страницу и реализуйте getInitialProps :

   import React from "react";
   
   class Page extends React.Component {
     static async getInitialProps() {
       // Получение данных на сервере
       const res = await fetch("https://api.example.com/data");
       const data = await res.json();
   
       // Передача данных в компонент через пропсы
       return { data };
     }
   
     render() {
       const { data } = this.props;
       return (
         <div>
           <h1>Server-Side Rendered Page</h1>
           <pre>{JSON.stringify(data, null, 2)}</pre>
         </div>
       );
     }
   }
   
   export default Page;

getServerSideProps выполняется на сервере; getInitialProps при первой загрузке выполняется на сервере, а при клиентских переходах может выполняться в браузере. Оба относятся к Pages Router.

Что такое “реактивное программирование” (reactive programming) в контексте React?

Реактивное программирование — это парадигма программирования, ориентированная на асинхронные потоки данных и изменение состояния, где реактивные системы автоматически обновляются в ответ на изменение данных.

В контексте React:

1. Компоненты обновляются автоматически:

   • Компоненты React автоматически перерисовываются в ответ на изменение состояния или пропсов.

2. Использование хуков:

   • Хуки, такие как useState, useEffect, и useReducer, позволяют управлять состоянием и побочными эффектами, обеспечивая реактивное поведение.

   const [count, setCount] = useState(0);
   
   useEffect(() => {
     console.log(`Count has changed to ${count}`);
   }, [count]);

3. Интеграция с библиотеками:

   • Библиотеки, такие как RxJS, могут быть использованы для управления асинхронными потоками данных в приложениях React.

   import { useEffect } from 'react';
   import { fromEvent } from 'rxjs';
   
   const MyComponent = () => {
     useEffect(() => {
       const subscription = fromEvent(document, 'click').subscribe(() => {
         console.log('Document clicked');
       });
   
       return () => subscription.unsubscribe();
     }, []);
   
     return <div>Click anywhere in the document</div>;
   };

Реактивное программирование в контексте React позволяет создавать приложения, которые автоматически реагируют на изменения данных и состояния, используя хуки и интеграцию с реактивными библиотеками, такими как RxJS.

Почему возникает hydration mismatch в React?

Hydration ожидает, что первый клиентский render создаст ту же разметку, что пришла с сервера. Расхождение вызывают Date.now(), случайные значения, locale или timezone, данные, изменившиеся между рендерами, неверная вложенность HTML и чтение window или localStorage во время render. Browser-only состояние переносят в effect либо передают серверный snapshot и используют одинаковые исходные данные. Ветвление по typeof window прямо в JSX часто создаёт разные деревья. suppressHydrationWarning применяют только к неизбежному локальному отличию и на ограниченном узле, а не как общее исправление.