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:

Создайте страницу и реализуйте 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):

Создайте страницу и реализуйте 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:

Компоненты обновляются автоматически:
- Компоненты React автоматически перерисовываются в ответ на изменение состояния или пропсов.
Использование хуков:
- Хуки, такие как useState, useEffect, и useReducer, позволяют управлять состоянием и побочными эффектами, обеспечивая реактивное поведение.
```
const [count, setCount] = useState(0);

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

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

Библиотеки, такие как 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.

Как обновить состояние компонента после выполнения асинхронной операции?

Для обновления состояния компонента после выполнения асинхронной операции используйте useState и useEffect хуки в функциональных компонентах.

Шаги:

Создайте состояние с помощью useState:

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

Выполните асинхронную операцию внутри useEffect :

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch("https://api.example.com/data");
      const result = await response.json();
      setData(result); // Обновление состояния с данными
      setLoading(false); // Установка состояния загрузки в false
    } catch (err) {
      setError(err); // Обновление состояния ошибки
      setLoading(false); // Установка состояния загрузки в false
    }
  };

  fetchData();
}, []); // Пустой массив зависимостей, чтобы выполнить только при монтировании

Пример:

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/data");
        const result = await response.json();
        setData(result); // Обновление состояния с данными
        setLoading(false); // Установка состояния загрузки в false
      } catch (err) {
        setError(err); // Обновление состояния ошибки
        setLoading(false); // Установка состояния загрузки в false
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

Для обновления состояния компонента после выполнения асинхронной операции используйте хуки useState для хранения состояния и useEffect для выполнения асинхронного запроса и обновления состояния.