重定向后渲染反应组件（Nextjs，服务器端渲染）

【问题标题】：Render react component after redirecting (Next.js, serversiderendering)重定向后渲染反应组件（Nextjs，服务器端渲染）
【发布时间】：2023-03-25 11:42:02
【问题描述】：

我是 next.js 的新手，遇到了一个问题我有一些静态链接重定向到 pages 文件夹下的 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

【问题讨论】：

你必须在 useEffect() 中使用 [] 依赖移动你的 API 调用，这样它才会在组件加载后运行。

标签： javascript reactjs typescript next.js server-side-rendering

【解决方案1】：

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

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

 },
fetchData()
},[])

关于getServerSideProps的更多信息请参考here

【讨论】：

你忘了调用 fetchData();
嘿，谢谢你的回答，我明白你想说什么我想知道的是如果我们删除 getServerSideProps() 方法，并使用 useEffect()，什么是真实的-我们将看到时间劣势，我在某处读到 getServerSideProps() 对 SEO 有益，而且我的页面实际上是用户交互的，这意味着它需要在其下的每个用户 ACTION 上发出 API 请求。所以，你能告诉我有什么缺点吗？这将是很大的帮助