【Next.js】触ってみた

学習ブログ。
自分向けの備忘録。

Next.jsとは

React開発のためのフレームワーク。

３種類のレンダリングの使用

CSR クライアントサイドレンダリング
SSR サーバーサイドレンダリング
SG 静的サイト生成

CSR（クライアントサイドレンダリング）

データフェッチやルーティングの全てがクライアント側で行われる

【メリット】
・ブラウザ側でのみ画面が構築されるため、静的なファイルの配置のみで動く
・サーバーの負荷が軽い

【デメリット】
・初期描画に時間がかかる

SSR（サーバーサイドレンダリング）

サーバーにリクエストがきたタイミングで動的にHTMLを生成

【メリット】
・利用者の端末による差異を軽減することができる
・JSをサーバー上で事前に実行するため、大量のJSファイルをクライアントに送信する必要がない
・生成済みのHTMLを取得するためSEOにつよい

【デメリット】
・生成処理を全てサーバー側でするため、負担が大きい
・サーバー上でのページの生成には時間がかかる

SG（静的サイト生成）

・ビルド時にデータフェッチや値の決定を行いHTMLを構築する
・クライアントからリクエストされたら、生成済みのHTMLを渡す

【メリット】
・構築済みのページのため表示速度が早い

【デメリット】
・更新にはビルドが必要なため、リアルタイムでの更新ができない
→更新頻度が高い動的コンテンツとの相性が悪い

App Routerとは

パスを管理するための独自のルーターを提供しているものの１つ。（もう１つはPages Routerだが、App Routerが推奨されている）
フォルダーベースのルーターとなる。

/app配下のフォルダー階層に準じて、リクエストパスとコンポーネントとの対応関係が決まる。

構成

※Udemy内で使用したプロジェクト内をキャプチャ

①src > app > page.js
ページを開いた際に最初に表示される

②src > app > layout.js
グローバルに共有されるUIを定義するために使用される。
rootのlayoutは全てのページに適用される。その配下ディレクトリごとに定義するのも可能。

③src > app > dataディレクトリ
データを格納

④src > app > not-found.js
一致するパスのページが見つからなかった場合に表示する

公式参考：
https://nextjs.org/docs/getting-started/project-structure

fetch関数

Next.jsではfetch()を拡張しており、キャッシュの動作をコントロールすることができる。
デフォルトはキャッシュが効いてる。（cache: force-cacheと同意）

import "./lib";
import ClientComp from "./components/ClientComp";
import { ENDPOINT } from "@/constants";
import ArticleList from "@/components/articleList";

export default async function SSR() {
　// fetch関数に第二引数でoptionを渡す（下記のオプションrevalidateは10秒ごとにキャッシュをクリアするの意味）
  const articles = await fetch(ENDPOINT, { revalidate: 10 }).then((res) =>
    res.json()
  );
  return (
    <>
      <div>SSR Page</div>
      <ClientComp />
      <ArticleList list={articles} basePath="/010_SSR" />
    </>
  );
}

MEMO
キャッシュを効かせる場合（cache: force-cache）
→ハードリフレッシュした場合には、キャッシュを使用せずに新しくデータを取りに行き、サーバーサイドからHTMLを返す

ダイナミックルーティング

[]で生成されたフォルダは動的にパスが変わるというルール
↓今回で言うと、010_SSRの直下のパスが動的に変化するという意味

import { ENDPOINT } from "@/constants";
import Article from "@/components/article";

// paramsでidを取得、該当の記事情報をcomponentへ渡し、表示させる
export default async function SSR({ params }) {
  const article = await fetch(`${ENDPOINT}/${params.id}`, {
    revalidate: 10,
  }).then((res) => res.json());
  return (
    <>
      <Article data={article} />
    </>
  );
}

【参考】
・Udemy：【2024年最新】React(v18)完全入門ガイド

c.sakyou