1

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

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. Подскажите пожалуйста как это сделать?

2 ответа 2

1

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

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

0

можешь 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}
      }
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.