Как в Next.js 13 функцию fetch использовать в клиентском компоненте?

Question

[Нина]

Есть серверный и клиентский компоненты. Данные для серверного компонента я получаю с помощью fetch, который вынесла в отдельный файл getLessonsSection.js :

export const getLessonsSection = async(slug) => {

  const response = await fetch( `${ baseApi }api/fullsinglecat/${slug }`, {
      cache: "no-store",
    }
  );

  if( !response.ok ) throw new Error( "Ошибка при получении секции" );
 
  return response.json();
};

Потом в серверном компоненте получаю эти данные:

export default async function LessonsSectionPage({ params }) {

  const lessonsSection = await getLessonsSection( params.section );
return (
....
)
}

Вопрос такой, как мне получать эти же самые данные в клиентском компоненте?

Comments

[szQocks]

в useEffect

[szQocks]

или прокинь данные в клиентский компонент из серверного через пропсы

[Нина]

Будет ли правильным решение написать другую функцию именно для клиентских компонентов (с помощью SWR)? т.е. у меня будет две функции для получения одних данных. Вернее, данные каждый раз будут разные, т.к. разным будет динамически меняющийся slug

[Нина]

szQocks, Спасибо за помощь. Только у меня не получилось использовать ни один, ни второй Ваш вариант. Если прокидывать функцию fetch в дочерний компонент, при вызове все равно нужен await, а его нельзя использовать в клиентском компоненте.
А если использую вариант с useEffect, то почему-то у меня происходит очень много запросов к серверу, и сервер отключается (429 (Too Many Requests) ). Вот мой useEffect:

const [ lessonSection, setLessonSection ] = useState( {} );
  const [ lessonCategory, setLessonCategory ] = useState( {} );

  const segments = useSelectedLayoutSegments();

  useEffect( () => {
    async function f() {
      if( segments.length > 0 ) {
        const newSection = await getLessonsSection( segments[ 0 ] );
        setLessonSection( newSection );
      }
      if( segments.length > 1 ) {
        const newCategory = await getLessonsSection( segments[ 1 ] );
        setLessonCategory( newCategory );
      }
    }

     f();
  }, [  segments, lessonSection, lessonCategory ] );

[Нина]

Убрала из массива зависимостей у useEffect segments, lessonSection, lessonCategory , - вроде, перестал постоянно посылать запросы на сервер. Но при проверке работы, вижу, что часто глючит, - не получает значения и выводит пустые строки

[Нина]

С функцией SWR, написанной специально для клиентского компонента, все работает отлично

[szQocks]

Нина, можешь заюзать SWR, или же получить данные в useEffect или получить данные в вышестоящем серверном компоненте и прокинуть их во вложенный клиентский компонент

но я не вижу смысла получать данные в клиентском компоненте, если расскажешь о своей задаче, что ты пытаешься сделать, может я бы и подсказал как желательно надо получать данные в твоей ситуации

[Нина]

szQocks, вот ссылка на проект https://rem-ur.ru/cats
В каталоге при навигации по левому меню мы открываем страницы (например, https://rem-ur.ru/cats/obshchie-raboty), которые являются серверными компонентами. Вот код:

export default async function LessonsSectionPage({ params }) {

  const lessonsSection = await getLessonsSection( params.section );
  const lessonChildrens = lessonsSection.cats.children_categories;

   return (
    <section
      className={ `${ styles[ "lessons-section" ] } section` }
    >
      <h2 className="title">{ lessonsSection.cats.title }</h2>
      {
        lessonChildrens.length > 0 ? (
            <ul className={ styles[ "lessons-section__list" ] }>
              {
                lessonChildrens.map( category => {
                  return (
                    <LessonsSectionItem
                      key={ category.slug }
                      lessonsSection={lessonsSection}
                      category={ category }
                    />
                  );
                } )
              }
            </ul>
          )
          : null
      }
    </section>
  );
}

Данные в нем получаются с помощью функции getLessonsSection:

import { baseApi } from "@/utils/constants";

export const getLessonsSection = async(slug) => {

  const response = await fetch( `${ baseApi }api/fullsinglecat/${slug }`, {
      cache: "no-store",
    }
  );

  if( !response.ok ) throw new Error( "Ошибка при получении секции" );

    return response.json();
};

А в layout для этого каталога есть Breadcrumbs, который является клиентским компонентом (в нем нужно получать путь в адресной строке, что я делаю через const segments = useSelectedLayoutSegments()). И этот компонент должен получать данные , что и серверный компонент LessonsSectionPage. Т.е. Breadcrumbs при получении данных должен получить путь в адресной строке и передать его в функцию fetch, которая уже по этому пути (url) вернет ему данные. Вот такая задача.
Layout для каталога, где находятся страницы и Breadcrumbs :

export default async function LessonsCatalogLayout({ children, }) {

   return (
    <>
      <div className="lessons-catalog-layout">
        <BreadcrumbsWrap
        />
        <div className={ styles[ "lessons-catalog-wrap" ] }>
          <LeftCatalogMenu  />
          { children }
        </div>
      </div>
    </>
  );
}

[szQocks]

Нина, всё что я прочитал я понял до одного момента

(в нем нужно получать путь в адресной строке, что я делаю через const segments = useSelectedLayoutSegments()). И этот компонент должен получать данные

не нужно в хлебных крошках получать какие-то данные с сервера, компонент хлебных крошек должен отображает ссылки на основе адресного пути или же параметров, в зависимости от того как реализован компонент хлебных крошек, у тебя кстати там написано ul > li, желательно там делать полную навигацию, nav > ul > li > a > текст

и всё что остаётся для того что бы получать pathname с клиента, это заюзать хук usePathname из некста
https://nextjs.org/docs/app/api-reference/function...

[Нина]

szQocks, Спасибо за Вашу помощь.
Что бы я не использовала (usePathname или useSelectedLayoutSegments ), у меня будет строка на латинице, например /cats/obshchie-raboty. А чтобы перевести это все на кириллицу, мне и нужно получать данные с сервера, и уже из этих данных брать title, который на кириллице, и который я и использую в хлебных крошках

[Нина]

szQocks, "желательно там делать полную навигацию, nav > ul > li > a > текст" - за подсказки спасибо!

[szQocks]

Нина, кароче твоя проблема в том что ты не верно пытаешься сделать компонент хлебных крошек

в последний раз когда я делал компонент хлебных крошек, это было на стажировке на реакте, и я там пробегался по массиву роутов приложении, т.к приложение было не на некста а не реакте голом, и на основе pathname и роутов (дерева) приложения отображал те или иные хлебные крошки

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

Ну по крайней мере я бы сделал так, как другие сделали бы - не знаю

если мой вариант не устроит, просто заходишь на гитхаб и вбиваешь в поиск breadcrumbs next example и смотришь как реализовали другие

[szQocks]

Нина, вот такой у меня был примерно написан массив роутов, только там был ещё ключ title и значение к нему, типа если path равен '/cats' то title был для него 'Кошечки' к примеру) , я его просто экспортировал в компонент хлебных крошек и пробегался по нему https://reactrouter.com/en/main/routers/router-provider

[szQocks]

Нина,

А чтобы перевести это все на кириллицу, мне и нужно получать данные с сервера, и уже из этих данных брать title, который на кириллице, и который я и использую в хлебных крошках

если у тебя где-то массив есть с переводом, пф - заюзай его в хлебных крошках, чё париться, в общем я подсказал, думаю дальше уже справишься, удачи)

[Нина]

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