重定向后渲染反应组件（Next.js，serversiderendering）

Question

我是 next.js 的新手，遇到了一个问题我有一些静态链接正在重定向到页面文件夹

下的 search.tsx

当前行为：现在，如果我点击任何链接，首先它会等待 API 响应，然后呈现搜索页面

预期：- 它应该先呈现然后等待 API 响应

search.tsx

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

Answer 1

getServerSideProps 在导出此 async 函数的页面被 请求时运行 ，getServerSideProps 用于 SSR，如果你想渲染页面然后 fetch 数据，那么你必须在 client 端进行，你可以使用 useEffect 可以用来 fetch 数据，因为它只在 client 端运行。

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

 },
fetchData()
},[])

参考here了解更多关于getServerSideProps

重定向后渲染反应组件（Next.js，serversiderendering）

Render react component after redirecting (Next.js, serversiderendering)

javascript

reactjs

typescript

next.js

server-side-rendering