Как на Next Js на серверных компонентах получать данные?

Question

[GNG999]

Читаю вот тут как получать данные с серверного компонента Next Js

мой компонент

import classNames from "classnames/bind";
import style from './style.module.scss'
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";



const cn = classNames.bind(style)

const getData =async ()=>{
     const response = await fetch("http://localhost:9000/api/cart/qty" )
     const qty = await response.json()
}


export default  async function  MainPage()  {
const data = await getData()
return (<div className={cn('main-page')}>
        <div className={cn('title-section')}>
            <div className={cn('title')}>
                <p>
                    Уникальные изделия кубачинских мстеров
                </p>
                {/*{qty.qty}*/}
            </div>
        </div>
        <div className={cn('features')}>
            <div className={cn('item')}>
                <Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>Индивидуальный подход</span>
            </div>
            <div className={cn('item')}>
                <Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>Доставка по всей России</span>
            </div>
            <div className={cn('item')}>
                <Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>300+ изделий</span>
            </div>
            <div className={cn('item')}>
                <Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>Наш магазин открыт с 2003 года</span>
            </div>
        </div>
        <div className={cn('products-catalog')}>
            {[1,2,3,4,5,6,7,8,9,10,11,12].map((el)=><Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`}><ProductItem /></Link>)}
        </div>
    </div>)
}

Данный код вызывает ошибку

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Как это поправить ?
Ошибка падает именно когда я делаю компонент MainPage асинхронным export default async function MainPage()

Answer 1

[Данила]

У тебя getData() возвращает промис и ты его пытаешься зарендерить в jsx, из-за чего получаешь ошибку

Вот так должно быть:

import classNames from "classnames/bind";
import style from './style.module.scss'
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";

const cn = classNames.bind(style)

const getData = async () => {
    const response = await fetch("http://localhost:9000/api/cart/qty");
    if (!response.ok) {
        throw new Error("Failed to fetch data");
    }
    return await response.json();
}

export default async function MainPage() {
    const data = await getData();

    return (
        <div className={cn('main-page')}>
            <div className={cn('title-section')}>
                <div className={cn('title')}>
                    <p>
                        Уникальные изделия кубачинских мастеров
                    </p>
                    {/* Используем полученные данные */}
                    <p>{data.qty}</p>
                </div>
            </div>
            <div className={cn('features')}>
                <div className={cn('item')}>
                    <Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Индивидуальный подход</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Доставка по всей России</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>300+ изделий</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Наш магазин открыт с 2003 года</span>
                </div>
            </div>
            <div className={cn('products-catalog')}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((el) => (
                    <Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`} key={el}>
                        <ProductItem />
                    </Link>
                ))}
            </div>
        </div>
    )
}

Comments

[GNG999]

Все равно таже ошибка

[Данила]

GNG999, а какая у вас версия next? попробуйте другое решение:

import classNames from "classnames/bind";
import style from './style.module.scss';
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";
import { use } from 'react';

const cn = classNames.bind(style);

const getData = async () => {
    const response = await fetch("http://localhost:9000/api/cart/qty");
    if (!response.ok) {
        throw new Error("Failed to fetch data");
    }
    return await response.json();
};

export default function MainPage() {
    const data = use(getData());

    return (
        <div className={cn('main-page')}>
            <div className={cn('title-section')}>
                <div className={cn('title')}>
                    <p>
                        Уникальные изделия кубачинских мастеров
                    </p>
                    {/* Используем полученные данные */}
                    <p>{data.qty}</p>
                </div>
            </div>
            <div className={cn('features')}>
                <div className={cn('item')}>
                    <Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Индивидуальный подход</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Доставка по всей России</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>300+ изделий</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Наш магазин открыт с 2003 года</span>
                </div>
            </div>
            <div className={cn('products-catalog')}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((el) => (
                    <Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`} key={el}>
                        <ProductItem />
                    </Link>
                ))}
            </div>
        </div>
    );
}

[GNG999]

Данила, версия 14.1
пока также
я закомментил const data = use(getData()); внутри MainPage и саму getData
те просто компонент MainPage - таже ошибка , че то сам async нексту не нравится

[Данила]

GNG999, https://nextjs.org/docs/app/building-your-applicat...

Нельзя использовать асинхронные компоненты для клиентской стороны - они работают исключительно как Server Components. Об этом написано в документации.

Если компонент должен быть серверным и асинхронным, не указывайте 'use client' в начале файла, и просто оставляйте его как серверный:

export default async function MainPage() {
  const data = await getData();
  return (
    <div className={cn('main-page')}>
      <div className={cn('title-section')}>
        <div className={cn('title')}>
          <p>Уникальные изделия кубачинских мастеров</p>
        </div>
      </div>
      {/* другие части страницы */}
    </div>
  );
}

Если компонент требует клиентской интерактивности, нужно загружать данные на серверной стороне, а на клиенте использовать хуки для обработки состояния:

'use client';

import { useState, useEffect } from 'react';

export default function MainPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const result = await getData();
      setData(result);
    }
    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div className={cn('main-page')}>
      <div className={cn('title-section')}>
        <div className={cn('title')}>
          <p>Уникальные изделия кубачинских мастеров</p>
        </div>
      </div>
      {/* другие части страницы */}
    </div>
  );
}