Блог

Главная - Вопросы по программированию - Отрисовка компонента реакции после перенаправления (Next.js, управление серверами)

Отрисовка компонента реакции после перенаправления (Next.js, управление серверами)

#javascript #reactjs #typescript #next.js #server-side-rendering

Вопрос:

я новичок в next.js, и столкнулся с одной проблемой, у меня есть несколько статических ссылок, которые перенаправляют на search.tsx в папке «страницы».

текущее поведение : теперь, если я нажму на какие-либо ссылки , сначала он будет ждать ответа API, а затем отобразит страницу поиска

ожидаемое : — сначала он должен отображаться, а затем ждать ответа API

поиск.tsx

 export const getServerSideProps = async (props: any) => {
    const apiResponse = await api.getProperties()
    return {
       props: {
       ...apiResponse,
   },
  }
}
const Search = (props: any) => {
  </searchResult>
}
export default Search

Комментарии:

1. Вы должны переместить вызов API в useEffect() с зависимостью [], чтобы он выполнялся только после загрузки компонента.

Ответ №1:

getServerSideProps запускается всякий раз, когда async запрашивается страница , экспортирующая эту функцию, getServerSideProps используется для SSR , если вы хотите отобразить страницу, а затем fetch данные, то вам придется сделать это в client стороне, вы можете использовать useEffect то, что можно использовать для извлечения данных, потому что оно выполняется только client сбоку.

 useEffect(()=>{
 async function fetchData(){
    // getch data fro API and set state

 },
fetchData()
},[])

обратитесь сюда для получения дополнительной информации о getServerSideProps

Комментарии:

1. Вы забыли вызвать функцию fetchData();

2. Эй, спасибо за ваш ответ, и я понял, что вы пытаетесь сказать , я хотел бы знать, если мы удалим метод getServerSideProps() и используем useEffect (), какие недостатки мы увидим в реальном времени, я где-то читал, что getServerSideProps() полезен для SEO, и моя страница действительно интерактивна для пользователей, что означает, что ей нужно будет делать запросы API для каждого ДЕЙСТВИЯ пользователя под ним. итак, можете ли вы сказать мне, в чем недостатки,? это будет большим подспорьем

Метки: ,