Как отобразить preloader при загрузки страницы NextJS?

Question

[Дмитрий Путилов]

У меня имеется вот такой вот компонент

import {
  GetServerSidePropsContext,
  GetServerSidePropsResult,
  NextPage,
} from "next";
import axios, { AxiosResponse } from "axios";

interface Geo {
  lat: string;
  lng: string;
}

interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

interface IUser {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

interface IProps {
  user?: IUser;
  error?: string;
}

const UserDetailPage: NextPage<IProps> = ({ user, error }) => {
  if (error)
    return <div>Произошла ошибка при получении пользователя: {error}</div>;

  if (!user) return <div>Загрузка...</div>;

  return (
    <div>
      <div>Имя: {user.name}</div>
      <div>Город: {user.address.city}</div>
    </div>
  );
};

export default UserDetailPage;

export const getServerSideProps = async (
  context: GetServerSidePropsContext,
): Promise<GetServerSidePropsResult<IProps>> => {
  try {
    const id = context.query.id;
    const response: AxiosResponse<IUser> = await axios.get(
      `https://jsonplaceholder.typicode.com/users/${id}`,
    );

    await new Promise((response) => setTimeout(response, 3000));

    const user = response.data;

    return {
      props: {
        user: user,
      },
    };
  } catch (error) {
    if (axios.isAxiosError(error)) {
      if (error.response?.status === 404) {
        return {
          props: {
            error: "Пользователь не найден",
          },
        };
      }
    }

    return {
      props: {
        error: "Неизвестная ошибка",
      },
    };
  }
};

Но проблема в том, что при загрузке страницы, она очень долго грузится и провисает, а я бы хотел отобразить какой нибдуь лоадер перед ее загрузкой. Пробовал создать в users/loader.tsx , но он все равно не отображается. Как можно это реализовать?

Answer 1

[Михаил Р.]

https://stackoverflow.com/questions/68118383/next-... ?
Для динамических маршрутов можно использовать fallback https://nextjs.org/docs/pages/building-your-applic...

Comments

[Дмитрий Путилов]

Либо что то не правильно понял, либо я не нашел)

[Михаил Р.]

Дмитрий Путилов,

Либо что то не правильно понял, либо я не нашел)

Либо Вы выражаетесь неясно. Что конкретно Вы не поняли/не нашли?

[Дмитрий Путилов]

D@Mike_Ro,

import {
  GetStaticPaths,
  GetStaticProps,
  GetStaticPropsContext,
  NextPage,
} from "next";
import axios, { AxiosResponse } from "axios";
import { ParsedUrlQuery } from "querystring";
import { useRouter } from "next/router";

interface Geo {
  lat: string;
  lng: string;
}

interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

interface IUser {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

interface IProps {
  user?: IUser;
  error?: string;
}

function UserDetailPage({ user }: IProps) {
  const router = useRouter();

  // Если страница еще не сгенерирована, будет отображаться это
  // До тех пор, пока `getStaticProps` не закончит свою работу
  if (router.isFallback) {
    return <div>Загрузка...</div>;
  }

  // рендеринг поста
  if (!user) return <div>Загрузка...</div>;

  return (
    <div>
      <div>Имя: {user.name}</div>
      <div>Город: {user.address.city}</div>
    </div>
  );
}

interface IPaths extends ParsedUrlQuery {
  id: string;
}

export const getStaticPaths: GetStaticPaths<IPaths> = async () => {
  const { data }: AxiosResponse<IUser[]> = await axios.get(
    "https://jsonplaceholder.typicode.com/users",
  );

  const paths = data.map((item) => ({
    params: {
      id: String(item.id),
    },
  }));

  return {
    paths,
    fallback: true,
  };
};

export const getStaticProps: GetStaticProps<IProps> = async (
  context: GetStaticPropsContext,
) => {
  try {
    const id = context.params?.id;

    if (!id) {
      throw new Error("Не удалось получить id пользователя.");
    }

    const response: AxiosResponse<IUser> = await axios.get(
      `https://jsonplaceholder.typicode.com/users/${id}?_delay=3000`,
    );

    const user = response.data;

    return {
      props: {
        user: user,
      },
    };
  } catch (error) {
    return {
      props: {
        error: "Неизвестная ошибка",
      },
      revalidate: 1,
    };
  }
};

export default UserDetailPage;

Вот я реализовал как в документации, но страница все ранво долго грузится, loader не отображает

В чем беда?(

[Михаил Р.]

Дмитрий Путилов,

_delay=3000

это зачем?

Добавьте логи в функции getStaticPaths и getStaticProps, чтобы точно понимать, где именно возникает задержка.

Что планировщик браузера говорит, на какой этапе возникает задержка?

[Дмитрий Путилов]

Михаил Р., Я специально сделал эту задержку, что бы с имитировать долгую загрузку с сервера, разное бывает, вдруг грузится долго бдует у кого, и пока грузится, я хотел отобразить loader и вот как его можно отобразить?