useSWR

SWR 先用缓存数据，再去fetch请求，获取最新数据。保证组件用的数据都是最新的。省去在 useEffect中初始化数据了。

// index.ts
//...
export default function Home() {
  const  {data: movies=[]} = useMovieList()

  const {data: favorites=[]} = useFavorites()

  // 两兄弟组件共用状态放在 zustand 管理起来，逻辑挺清楚的。
  // 写起来麻烦些。
  // 之前那种父组件向子组件传参，调用组件内方法。
  // 子组件向父组件传参，emit 自定义事件也挺麻烦的，并且耦合深，不通用
  const { isOpen, closeModal } = useInfoModalStore()




  return (
    <>
      <InfoModal visible={isOpen} onClose={closeModal}/>
      <Navbar></Navbar>
      <Billboard></Billboard>
      <div className="pb-40 pl-[47px] bg-black">
        <MovieList title="Trending Now" data={movies}></MovieList>
        <MovieList title="My List" data={favorites}></MovieList>
      </div>
    </>
  )
}

// useMovieList.ts
import fetcher from "@/libs/fetcher"
import useSWR from "swr"

const useMovies = ()=> {
  const {data, error, isLoading} = useSWR('/api/movies', fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  })
  return {
    data, 
    error,
    isLoading
  }
}

export default useMovies

// libs/fetcher.ts
import axios from 'axios';

const fetcher = (url: string) => axios.get(url).then(res => res.data);

export default fetcher;