Как в NextJS getServerSideProps добавить динамический id?

Question

[jedifa]

Подскажите пожалуйста, у меня есть компонент

export default function Home() {
  const [id, setId] = useState(0);
  const changeId = () => {
    setId(id + 1);
  }
  return (
    <div>
       <button onClick={() => changeId()}>Click</button>
   </div>
  )
}

Мне нужно получить данные с сервера, я получаю их через getServerSideProps:

export async function getServerSideProps(context) {
  const res = await fetch(`https://example/:id`); //Вместо :id должен быть id который в компоненте home
  const data = await res.json();

  return {
    props: {data}
  }
}

И после нажатия на кнопку когда изменяется state id мне нужно получить уже новые данные по другому id. Подскажите пожалуйста как это сделать?

Answer 1

[Валерий]

Напрямую в компоненте <Home />:

useEffect(() => await fetch(`https://example/${id}`), id)

в getServerSideProps вы можете использовать стандартный id для предзагрузки нужного содержимого, но потом рулить уже из компонента.

Comments

[jedifa]

Валерий, то есть основная идея в том что изначально при первом рендере загрузить данные через getServerSideProps чтобы был SSR а далее уже загружать напрямую через компонент?

[Валерий]

jedifa, да