Next.js SSR场景下重定向后如何实现先渲染组件再请求API

你当前使用的getServerSideProps是Next.js服务端渲染的内置生命周期方法，会在服务端先执行完所有异步逻辑、拿到完整的接口返回结果后，才会把渲染完成的页面和对应props返回给客户端，这就是点击链接后需要等待API响应完成才会展示页面的核心原因。

要实现「搜索页面优先渲染、再异步请求接口」的效果，你需要把接口请求逻辑从服务端侧移到客户端组件的副作用中执行，同时增加加载状态提升体验，修改方案如下：

• 移除原有getServerSideProps代码段，不再使用服务端预取数据逻辑
• 在Search组件内部引入useState、useEffect钩子，管理接口请求的状态与返回数据
• 组件挂载后在客户端发起接口请求，请求过程中可以自定义渲染加载态、页面固定UI，请求完成后再渲染搜索结果

修改后的参考代码如下：

import { useState, useEffect } from 'react'

// 移除原有的getServerSideProps代码
const Search = () => {
  // 声明接口返回数据、加载状态、错误状态变量
  const [properties, setProperties] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    // 组件挂载后在客户端发起异步请求
    const fetchProperties = async () => {
      try {
        const apiResponse = await api.getProperties()
        setProperties(apiResponse.properties)
        // 接口返回的其他字段可按照业务需求对应赋值
      } catch (err) {
        setError(err as Error)
      } finally {
        setLoading(false)
      }
    }

    fetchProperties()
  }, [])

  // 优先渲染加载态，也可以替换为搜索页面的骨架屏
  if (loading) return <div>搜索页面加载中...</div>
  if (error) return <div>加载失败，请刷新重试</div>

  return (
    <div>
      {/* 搜索页面固定UI可以优先渲染，比如搜索框、筛选栏等 */}
      <div className="search-header">
        <input placeholder="请输入搜索关键词" />
      </div>
      {/* 接口返回后再渲染搜索结果 */}
      <div className="search-result">
        {properties.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  )
}

export default Search

如果后续需要兼顾客户端请求的缓存、重发等能力，也可以搭配SWR、React Query等数据请求工具使用。

内容的提问来源于stack exchange，提问作者Tanuj Doshi