В мире веб-разработки ваш выбор инструментов и то, как вы ими владеете, может либо привести вас к победе, либо оставить вас в глуши. Сегодня мы отправляемся в увлекательное путешествие, изучая интеграцию useSWR в проект Next.js. И что может быть лучше, чтобы сделать этот квест захватывающим, чем пересечь бескрайние просторы Вестероса с помощью API льда и пламени, API, основанного на вселенной Game of Thrones.

Соберите свое оборудование для кодирования, когда мы отправимся в это приключение, вникая в азы использования SWR и воплощая в жизнь мир Игры престолов в приложении Next.js.

Шаг 1. Инициализируйте проект Next.js

Во-первых, давайте создадим новое приложение Next.js. Запустите следующую команду в своем терминале:

npx create-next-app@latest game-of-thrones-app

Это создаст новый каталог с именем game-of-thrones-app со свежим приложением Next.js.

Шаг 2: Установите SWR

Перейдите в каталог вашего нового приложения:

cd game-of-thrones-app

Установите пакет swr:

npm install swr

Или, если вы используете пряжу:

yarn add swr

Шаг 3: Получить данные

Давайте получим некоторые данные из конечной точки characters API.

Создайте новый файл с именем useCharacters.js в каталоге lib и добавьте следующий код:

import useSWR from "swr";

async function fetcher(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Error fetching data");
  }
  return res.json();
}


export function useCharacters(id) {
  const { data, error, isLoading } = useSWR(
    () =>
      id
        ? `https://anapioficeandfire.com/api/characters/${id}`
        : null,
    fetcher
  );

  return {
    character: data,
    isLoading,
    isError: error,
  };
}

Шаг 4: Создайте компонент

Теперь давайте создадим компонент, который отображает данные персонажа.

В каталоге components создайте новый файл с именем Character.js:

import { useCharacters } from "../lib/useCharacters";
import { useState } from "react";

export function Character() {
  const [inputValue, setInputValue] = useState(undefined);
  const [characterId, setCharacterId] = useState(undefined);

  const { character, isLoading, isError } = useCharacters(characterId);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading characters.</div>;

  return (
    <div>
      <div style={{marginBottom: '1em'}}>
        <input
          type="number"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Enter character id"
        />
        <button onClick={() => setCharacterId(parseInt(inputValue))}>Search</button>
      </div>

      {!character ? (
        <div>No character found with that id</div>
      ) : (
        <div>
          <h2>{character.name || "Unknown"}</h2>
          {Object.entries(character).map(([key, value]) => (
            <div key={key}>
              <strong>{key}: </strong>
              <span>{value}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Шаг 5: Запустите проект

Теперь пришло время интегрировать наш компонент Character в наше приложение. Откройте pages/index.js и импортируйте компонент Character:

import { Character } from "../components/Character";

export default function Home() {
  return (
    <div
      style={{
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        padding: "2em"
      }}
    >
      <h1
        style={{
          marginBottom: "1rem",
          fontSize: "2.5rem",
          textAlign: "center",
        }}
      >
        Game of Thrones Characters
      </h1>
      <Character />
    </div>
  );
}

Чтобы увидеть ваше приложение в действии, запустите:

npm run dev

Или, если вы используете пряжу:

yarn dev

Теперь перейдите к http://localhost:3000 в браузере и найдите своего любимого персонажа:

Конечно, то, что мы здесь построили, — это всего лишь небольшое доказательство концепции. Истинный потенциал useSWR, Next.js и API безграничен.

Поздравляем!

Преимущества использования SWR

Теперь, когда вы попробовали первоначальный вкус useSWR, давайте углубимся в причины, которые делают его отличным выбором.

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

2. Опыт работы в режиме реального времени. SWR автоматически перепроверяет данные, когда пользователь фокусируется на окне или повторно подключается к сети, поддерживая актуальность данных.

3. Глобальное состояние. Используя поставщика SWR, вы можете создать глобальное состояние в своем приложении. Это может упростить управление состоянием в сложных проектах.

Подводные камни использования SWR

Хотя useSWR — мощный инструмент, как и любой другой, у него есть свои ограничения:

1. Излишняя выборка. При неправильной настройке useSWR может привести к избыточной выборке, что приведет к ненужному использованию полосы пропускания.

2.Зависимость от скорости сети. Поскольку SWR зависит от скорости сети для повторной проверки, более медленные сети могут повлиять на работу пользователей.

Подведение итогов

useSWR — это невероятный инструмент, который может обогатить ваши проекты Next.js, упрощая получение данных. Однако, как и у любого инструмента, у него есть свои плюсы и минусы. Важно понимать это, чтобы использовать весь его потенциал.

Завершая наше путешествие по миру Вестероса, помните, что понимание и применение таких инструментов, как useSWR, действительно может выделить вас как разработчика. Сфера веб-разработки обширна и постоянно меняется, поэтому всегда продолжайте исследовать и учиться.

Оставайтесь с нами для нашего следующего приключения. Кто знает? Это может вывести нас за Стену!



Присоединяйтесь к Medium по моей реферальной ссылке — Leo G.
Прочитайте все истории от Leo G. (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Leo G…medium.com



Вот список ресурсов для углубления вашего понимания:

  1. Документация по useSWR: официальная документация по useSWR — отличная отправная точка для понимания возможностей этого инструмента и изучения способов его реализации в ваших проектах.
  2. Документация по React Query. React Query — еще одна мощная библиотека для извлечения данных, которую вы, возможно, захотите изучить. Официальная документация содержит подробные руководства и учебные пособия, которые помогут вам начать работу.
  3. Документация Redux: хотя useSWR и React Query отлично подходят для выборки данных, вы можете захотеть управлять состоянием своего приложения в более широком масштабе. Redux — одна из самых популярных библиотек управления состоянием, а официальная документация — кладезь полезной информации.