introduction

客户端数据抓取是非常有用的(当页面不需要SEO 索引时),当你不需要预渲染你的页面数据时,或者当你页面的内容需要频繁更新时 … 不像服务端渲染API,你能够在组件级别上在客户端进行数据抓取 ..

如果在页面级别,这个数据抓取发生在运行时,由于数据的改变导致页面更新 .. 当使用在组件级别,这个数据在组件挂载时进行数据抓取并且 仅仅由于数据的改变导致组件更新 ..

重要的是,使用客户端数据抓取能够有效的提高应用性能并且加快页面渲染速度 … 这是因为数据抓取完全是在页面或者组件挂载的时候进行,并且数据没有被缓存 …

在客户端通过 useEffect 进行数据抓取

function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)
  useEffect(() => {
    setLoading(true)
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

useEffect是React的一个Hook,类似于传统意义上的类组件的三个生命周期回调钩子 …

组件将被挂载,组件将被卸载，组件将被更新 ..

通过SWR 进行客户端数据抓取

更加推荐使用SWR进行客户端数据抓取,因为它具有更多的功能,例如数据缓存,重新验证，焦点跟踪,周期性抓取数据以及更多 …

通过它能够少写更多的代码,同时能够提高页面的交互性 …

import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

关于SWR的入门也不是很难 ….

SWR docs