速習App Router#2 SSR・CSR・ISR

はじめに

この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

目次

1.速習App Router#1
2.速習App Router#2 <- この記事
3.速習App Router#3
4.速習App Router#4
5.速習App Router#5
6.速習App Router#6
7.速習App Router#7

App RouterでのSSR・CSR・ISR

Pages RouterではgetServerSidePropsやgetStaticPropsを使ってレンダリングを決めていたが、App Routerではfetchに渡すオプションを使ってレンダリング方式を決める。

fetchに渡すオプションには
・{ cache: "force-cache" }
・{ cache: "no-store" }
・{ next: { revalidate: 10 }}
が存在する。
・{ cache: "force-cache" } は SSR
・{ cache: "no-store" } は SSG
・{ next: { revalidate: 10 }} は ISR
を意味する。

使う時はコンポーネントの中でfetchを実行し、オプションを渡す

    const res = await fetch(`${process.env.url}/rest/v1/notes?select=*`, {
        headers: new Headers({
            apikey: process.env.apikey as string
        }),
        cache: "no-store"
    });

さいごに

SSRとRSCの違いがあまり分かっていない分かりやすく説明出来る方教えていただけたらとても嬉しいです。