SWR: универсальный инструмент для работы с данными в React

SWR (Server Side Rendering) - это подход веб-разработки, при котором контент страницы формируется на сервере и отдается клиенту в уже готовом виде. Клиентская часть приложения получает полноценную HTML-разметку, включая контент и данные, что позволяет улучшить производительность и оптимизировать работу с поисковыми системами.

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

Пример кода на реализацию SWR можно представить следующим образом:

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/profile', fetcher);

  if (error) return <div>Ошибка загрузки</div>;
  if (!data) return <div>Загрузка...</div>;

  return (
    <div>
      <h1>Профиль пользователя: {data.name}</h1>
      <p>Возраст: {data.age}</p>
      <p>Email: {data.email}</p>
    </div>
  );
}

function fetcher(url) {
  return fetch(url).then(response => response.json());
}

export default Profile;

В приведенном выше примере мы используем функцию `useSWR` из библиотеки SWR. Эта функция принимает два аргумента: URL запроса и функцию-загрузчик данных. В нашем случае функция `fetcher` выполняет запрос к нашему API и возвращает данные в формате JSON.

Затем мы используем полученные данные внутри компонента Profile. Если данные еще загружаются, мы выводим сообщение "Загрузка...". Если произошла ошибка при загрузке данных, выводим сообщение об ошибке. В противном случае выведем профиль пользователя с полученными данными (имя, возраст, email).

SWR упрощает и ускоряет разработку приложений с использованием серверного рендеринга, позволяя эффективно работать с данными на клиенте и сервере. Это позволяет создавать более быстрые и отзывчивые веб-приложения с улучшенным пользовательским опытом.