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

Question

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

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

Это уже вы будете делать на клиенте если нет никакого роута на другую страницу.

Смотрите getServerSideProps работает исключительно на сервере и только в первом рендере. То есть сначала вызывается getServerSideProps, он выполняется, делает свои сайд эффекты, получает данные и показывает эти данные пользователю. getServerSideProps во второй раз уже на клиенте не запустите. Если нужно получить данные вы это должны сделать именно на клиенте.

Answer 2

можешь id отправлять как query параметр через router. например:

 router.push({
      pathname: '/название страницы/[pid]',
      query: { id: id },
 })

и в getServerSideProps ее получить через context.query.id

 export async function getServerSideProps(context) {
      const {id} = context.query
    
      const res = await fetch(`https://example/${id}`); 
      const data = await res.json();
    
      return {
        props: {data}
      }
    }

БЛОГ НА HUSL

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

Ответы (2 шт):