Как получить данные из get параметров и подставить их в запрос getStaticProps?

Question

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

Всем привет, у меня есть вот такой вот компонент

import { AxiosResponse } from "axios";
import { GetStaticProps, GetStaticPropsContext, NextPage } from "next";
import { SidebarContainer } from "@widgets/sidebar";
import { AxiosInstance } from "@shared/api";
import { IResponseTracks } from "@shared/types";

interface IStaticProps {
  tracks: IResponseTracks[];
}

const Main: NextPage<IStaticProps> = () => {
  return (
    <SidebarContainer>
      <main>clips</main>
    </SidebarContainer>
  );
};

export default Main;

export const getStaticProps: GetStaticProps<IStaticProps> = async (
  context: GetStaticPropsContext,
) => {
  try {
   
    const response: AxiosResponse<{ items: IResponseTracks[] }> =
      await AxiosInstance.get("tracks");
    return {
      props: {
        tracks: response.data.items,
      },
    };
  } catch (e) {
    throw Error("error");
  }
};

Как я могу получить данные get из context и подставить их, так же эти данные будут меняться исходя из фильтров, и они должны будут обновляться, то есть выбрал пользователь 2 страницу, get поменялись на _page=2 и отправился новый запрос, а страница отрисовалась заново с новыми данными, знаю что можно использовать getServerSideProps, но я читал что лучше его не использовать или очень редко, но у меня таких 6 страниц и он будет везде, можно его как то обойти? Читал что он не оптимизированный

Answer 1

[Михаил Р.]

Если параметры динамически изменяются в зависимости от действий пользователя с интерфейсом (фильтры, пагинация итп.), статическая генерация не лучший вариант. В таком случае, лучше использовать хуки useState и useEffect для хранения и изменения get параметров, и последующего выполнения запроса к API.

Но если прям невтерпеж, то, как вариант:

export const getServerSideProps = async (context) => {
  const page = context.query.page || 1;
  
  try {
    const res = await axios.get(`tracks?page=${page}`);
    return {
      props: {
        tracks: res.data.items,
      },
    }
  } catch (e) {
    return {
      notFound: true,
    }
  }
}

export const getStaticProps = async (context) => {
  const page = context.params.page;
  // code
}