Nomflixリビルド-SSRの適用[2]

Next.利用js

getServerSidePropsがいつ実行されるか

getServerSidePropsはサーバ側のみで実行され、ブラウザでは実行されません.
このページを直接要求すると、getServerSideProps要求時に実行されて返されるpropsがプリレンダリングされます.
使用

next/linkornext/routerクライアントページ移動を要求する場合はgetServerSideProps

getServerSidePropsはページでのみ使用でき、ページ以外のファイルでは使用できません

getServerSidePropsはいつ使用しますか?

getServerSidePropsを要求するときにデータをインポートしてページを事前にレンダリングする必要がある場合にのみ使用できます.
プリレンダリングデータが不要な場合は、クライアントからデータをインポートすることを考慮します.
公式文書に親切に書いてありました.Clent-Side多くのデータ交換が行われている
getServer SidePropsは使用されていません.NomFlix 프로젝트getServerSidePropsによるデータ通信を試みる

Movieリストを受信するgetServerSideProps

一例を挙げて、Movieリストを持ってきてください.

これらのムービーリストを受け取ります
伝統的に、

useEffect(() => {
    async function fetchData() {
      try {
        const {
          data: { results: nowPlaying },
        } = await movieApi.nowPlaying();
        const {
          data: { results: upcoming },
        } = await movieApi.upcoming();
        const {
          data: { results: popular },
        } = await movieApi.popular();
		loading.current = false;
        setNowPlaying(nowPlaying);
        setUpcoming(upcoming);
        setPopular(popular);
      } catch (error) {
        setError("Can't find movies infomation.");
      } 
    }
    fetchData();
  }, [loading]);

このようにして、Client-Side中Fetching状態にする.
これをクリアし、次のコードをコンポーネントの外に記述します.

export const getServerSideProps: GetServerSideProps = async () => {
  try {
    const {
      data: { results: nowPlaying },
    } = await movieApi.nowPlaying();
    const {
      data: { results: upcoming },
    } = await movieApi.upcoming();
    const {
      data: { results: popular },
    } = await movieApi.popular();
    return { props: { nowPlaying, upcoming, popular } };
  } catch (err) {
    const ErrorMessage = "Can't find movies infomation.";
    return { props: { ErrorMessage } };
  }
};

try節nowplaying、new、popular通信を受信して返却に成功する.catch節は、要求に失敗した場合にエラーメッセージを返します.
を選択します.

interface ServerSideProps {
  nowPlaying: Array<MOVIE_TYPE>;
  upcoming: Array<MOVIE_TYPE>;
  popular: Array<MOVIE_TYPE>;
  ErrorMessage: string;
}
const Home = ({ nowPlaying, upcoming, popular, ErrorMessage }: ServerSideProps) => {
const [error, setError] = useState('');
  const loading = useRef(true);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    if ((useIsNull(nowPlaying) && useIsNull(upcoming) && useIsNull(popular)) === false) {
      loading.current = false;
    }
  });
}

サーバ側が受信し、以前使用していた不要な状態がクリアされました.
次にpropsが空いているかどうかを確認し、loadをfalseに変更します!

ではこれでリフレッシュの時も出てきます~~
Next.jsはよく使うけど
自動ルーティングの利便性という理由だけを使いました.
SSRを適用するのは初めてで、不思議な経験でした.