【Next.js】管理画面を作りながらNext.jsを学ぶ(レンダリング)

まえがき

前記事でNext.jsの基本的な使い方を学んだ。
本記事では、Next.jsでCSR/SSR/SSGを使い分けるために必要な知識をまとめる。

Next.jsでは３つのレンダリング方法(CSR/SSR/SSG)が提供されている。※厳密にはISRもある
公式はパフォーマンス的にSSGを推奨している。

CSR/SSR/SSGの良いところ/悪いところは、下記の記事で自分でOUTPUTしてみた。

CSR

・useEffect関数 ... クライアント側で、マウント時に実行されるもの
・useEffect関数は、Server-sideでは実行されない。

import type { NextPage } from "next";
import axios from "axios";
import { useEffect, useState } from "react";
import { AccountTable } from "../components/account/AccountTable";
import { Box } from "@chakra-ui/react";

const Account: NextPage = () => {
  const [accounts, setAccounts] = useState([]);

  // クライアント側でレンダリングする際に実行
  useEffect(() => {
    axios.get("/data/accounts.json").then((res) => {
      setAccounts(res.data);
    });
  });

  return (
    <div>
      <Box m="10px">アカウント管理画面</Box>
      <AccountTable accounts={accounts} />
    </div>
  );
};

export default Account;

SSR

・getServerSideProps関数 ... サーバ側でレンダリング時に実行されるもの
・HTMLを生成するために必要な動的データの取得(APIコール)は、この関数内で実行する。
・ユーザ起因の動的データ取得処理は別で書けばOK。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

SSRは基本的に使わない方が良さそう

下記の記事でSSRを使うべきか/使わないべきかについて説明してくれている。
あとで自分用に見返すためにまとめ部分だけ引用させていただく。

・基本的にSSRをするとコードが複雑になるので、避けられるなら避けるべき。
・SSRが必要なのはSEOを意識するWebページだけ。
・SEOが不要なページであれば、認証ありなAPIコールは全てブラウザ上で行えば良い。
・不用意な混入を防ぐために、getInitialPropsをやめてgetServerSidePropsを使おう。

SSG

・useStaticProps関数　... ビルド時に実行されるもの
・propsとして渡されるデータは、ビルド時にJSONファイルとして生成される。
・HTTPリクエスト時にJSONファイルが同梱される。

import type { NextPage, GetStaticProps } from "next";

// propsとして受け取る型を定義
type Props = {
  accounts: AccountDto[];
};

const Account: NextPage<Props> = (props) => {
　//------
}
// ★ pagePropsとしてのデータは「out/_next/data/hogehoge配下にJSONファイルとして保存される」
export const getStaticProps: GetStaticProps<Props> = async () => {
  // getStaticPropsでaxios使うと怒られた。
  // const accounts = (await axios.get("/data/accounts.json")).data;
  const accounts = [
    {
      id: "act_0000001",
      name: "Anthony",
      age: 26,
      gender: "男",
    },
  ];
  return {
    props: { accounts }, // will be passed to the page component as props
  };
};