nextjs SSGとSSRのdynamicPage　実装　動きの確認

# 概要
next.js のSSGとSSRのdynamicPageの実装方法を確認します。


# 開発環境
OS:windows10
IDE:VScode

├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.6
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

# 実装
## SSG -Static Site Generation
実装方法のポイントは以下の２点です。
１．ファイル名を[]で囲む
２．コード上ではgetStaticPaths()を追加する

### ソースコード

```tsx:products/[pid].tsx
import path from 'path';
import fs from 'fs/promises';

import { Fragment } from 'react';

function ProductDetailPage(props : any) {
  const { loadedProduct } = props;

  if (!loadedProduct) {
    return <p>Loading...</p>;
  }

  return (
    <Fragment>
      <h1>{loadedProduct.title}</h1>
      <p>{loadedProduct.description}</p>
    </Fragment>
  );
}

async function getData() {
  const filePath = path.join(process.cwd(), 'data', 'dummy-backend.json');
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData as any);

  return data;
}

export async function getStaticProps(context :any) {
  const { params } = context;

  console.log(' SSG getStaticProps()')
  const productId = params.pid;

  const data = await getData();

  const product = data.products.find((product: { id: any; }) => product.id === productId);

  if (!product) {
    return { notFound: true };
  }

  return {
    props: {
      loadedProduct: product,
    },
  };
}

export async function getStaticPaths() {
  console.log(' SSG getStaticPaths()')
  const data = await getData();

  const ids = data.products.map((product:any) => product.id);
  const pathsWithParams = ids.map((id : any) => ({ params: { pid: id } }));

  return {
    paths: pathsWithParams,
    fallback: true,
  };
}

export default ProductDetailPage;

```
### 動きの確認
ビルドコマンドを実行する
```
npm run build
```
下はビルド結果の画像です。ビルド時にデータを取得してdynamicPageが作成されていることを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/2d81c107-eee4-f4d1-4c81-cac5fff81ca7.png)

サーバーを開いて動きを確認
```
npm start
```
以下gifアニメはproductのid(p1,p2,p3)を入力してページを確認している様子です。データ以外の値を入力すると404エラーになります。
生成されたページを開く→getStaticProps getStaticPathとも実行されない
生成されてないページを開こうとする→getStaticPropは実行され　getStaticPathは実行されない
![SSG_dynamicRoute.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/51ddb9f2-7489-2700-29c2-6be082dede68.gif)



## SSR-Sever Side Rendering
実装するためのポイント
ファイル名を[]で囲む。

### ソースコード
```tsx:user/[uid].tsx
import { useAccordionButton } from "react-bootstrap";

function UserIdPage(props:any){
	
	return <h1>{props.id}</h1>
}

export default UserIdPage;

export async function getServerSideProps(context: any) {
	console.log("SSR DynamicPage")
	const { params, req, res } = context;
	const userId :string = params.uid;
	return {
	  props: {
		id:'userid-' + userId, 
	  },
	};
}

```




### 動きを確認
以下コマンドを実行してビルドする。
```
npm run build
```

ビルド結果 SSRなのでビルド時にページは生成されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/9aea7039-800c-20f5-ccb6-cb26088735b4.png)

サーバーを開いて動きを確認
```
npm start
```

以下gifアニメはSSRのdynamicRoutingの動きを確認しているときの様子です。
適当な文字列を入力しています。
毎回getServerSidePropsが実行されています。


![SSR_dynamicRoute.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4cf1ef87-f303-84f2-8fdd-126f4e69f5d0.gif)


# SSGとSSRの使い分け
SSG → 全てのユーザーが共通で使うページ、
SSR → ユーザー個別のページ

例えばB2CのECショップを作る場合
SSG→商品閲覧機能　ログインページ
SSR→ユーザーページ 買い物履歴

# 参考
Section 5 Page Pre-Rendering & Data Fetching
99-101 109-110


https://www.udemy.com/course/nextjs-react-the-complete-guide/learn/lecture/25145684?start=270#content