SWR | nitaking.dev

参考資料:

SWR Global Configuration
SWRとgetServerSidePropsの組み合わせ

SWRConfig.value.fallback にgetServerSidePropsの値を使うことで、レイアウトシフトを防ぐことができる。

積極的に利用していきたい。

import { SWRConfig } from "swr";

export type HogeContainerComponentProps = {
  fallback: {
    "/api/hoge": Hoge;
  };
};

function HogeContainerComponent({
  fallback,
}: HogeContainerComponentProps): JSX.Element {
  return (
    <SWRConfig value={{ fallback }}>
      <HogePresentationalComponent />
    </SWRConfig>
  );
}

// getStaticProps でも同様
export const getServerSideProps: GetServerSideProps<
  HogeContainerComponentProps
> = async () => {
  const { data: hoge } = await axios.get("http://hogehoge/api/hoge");

  return {
    props: {
      fallback: {
        "/api/hoge": hoge,
      },
    },
  };
};

return HogeContainerComponent;