CSR / SSR / SSG / ISR について【RaiseTech フロントコース#14】

2021.09.28

悩んでいる人

開発しているとCSRとかSSRとか似たような名前がでてきてわからなーい。

本記事では、Next.jsを扱いながらCSR・SSR・SSG・ISRについて意味がわかるように解説していきます。

僕も、こちらの記事をまとめるまで全く知らなかったのですが色々調べていくうちに、なんとなく理解することができました。

これからフロントエンドをやっていく上で、必須の知識になるのでしっかり理解していきましょうー！

また、本記事は、Raise Techのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第15回の講義のまとめとなります。

CSR、SSG、SSR、ISRについて学ぼう！

まずは、CSR・SSR・SSR・ISRの概要とメリット、デメリットについて触れていきます。

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

▼概要
フロントでデータ取得をして、画面に描画する。

▼メリット
・ページ遷移時、データ取得時、差分のい変更するので動きが速い。
・特別な設定が不要

▼デメリット
・初回アクセス時に、全体のJSを読み込むので初回の表示が遅くなる。
・処理がフロントエンド側で行われるため、ユーザーのマシンスペックに依存する。
・動的なOGPの設定ができない

▼向いているアプリ
・1度開いたら一定時間続けて使用するアプリ
・管理系、社内アプリ

オカ

なるほど、、、Twitterとかのようなユーザーが投稿するようなアプリには合わないのですね。

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

▼概要
サーバー側でデータの取得、画面の構築を行います。

▼メリット
サーバー側で多くの処理を行うので、ユーザーのマシンスペックに依存しない。
CSRと比較するとアプリの初回起動が速い。

▼デメリット
・リクエスト毎にサーバー側でデータの取得を行うので、ページ遷移等が遅くなる
・サーバーの負荷が高くなる
・SSRするためのNode.jsを実行できるサーバーが必要となる。

▼向いているアプリ
・SEOが重要なアプリケーション

オカ

Railsだけで画面が表示できるのは、サーバー側でデータの取得から画面の構築を行っているからなのですね。

SSG（スタティックサイトジェネレーション）

▼概要
ビルド時にデータの取得→HTMLの構築を行う。

▼メリット
・ページ表示が早い！！
・SEOやOGPも問題ない。
・ビルド時に1回データの取得をするだけなのでDBへのリクエスト数をかなり減らすことができる。

▼デメリット
・ビルド後に更新されたデータは反映できない。
・データを更新した場合にはビルドが必要になる。

▼向いているアプリ
・SEOが重要なアプリ
・動的なOGPを設定したいアプリ
・ページの表示速度が求められるアプリ

オカ

ビルドしないとデータが更新されないというのはなかなかめんどくさそうなのだが、、、

とこれを解決するために次に出てくるISRがあります。

ISR（インクリメンタル静的再生成）

▼概要
ビルド時にデータの取得→HTMLの構築を行い、リクエストに応じてHTMLの再生成を動的に行う。

▼メリット
・コンテンツの更新の度に、全てのページをビルドし直す必要がなくなる
・どれだけの時間以降にアクセスが合った場合に再生性を行うか指定できるのでアプリの特性に合わせて負荷の調整ができる

▼デメリット
・指定時間経過後のアクセスでも、最初は古い画面が返却させるので常に最新の情報を表示されるわけではない
・現状では、全てのサーバーが対応しているわけではない

▼向いているアプリ
・SSGであげたようなアプリで、かつコンテンツの更新にも対応していきたい場合

Next.jsでどうやって扱っていくか

Next.jsでは、CSR・SSR・SSR・ISRを実現するための機能が全て用意されています。

pages/配下のページコンポーネントに対して以下の関数を定義することで実現可能になります。

■getServerSideProps (SSRをしたい時)
https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

■getStaticProps（SSGをしたい時）
https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

■getStaticPaths（ISRをしたい時）
https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

オカ

では、まずはサーバー側でデータの取得、画面の構築を行うSSRの実装方法について見ていきましょー！

ローカル環境でだけ試したので、詳細の動きの違いまでは説明しておりません。
こんなコードを記述することで、使い分けができるんだーぐらいの理解をしておいてもらえれば大丈夫です。

getServerSideProps

SSRを行いたい時にgetServerSidePropsという名前で関数を定義します。

import { GetServerSideProps, NextPage } from "next";
import { Cards } from "./components/Cards";

type Props = {
  posts: Array<{ id: string; title: string }>;
};
const Ssr: NextPage<Props> = (props) => {
  const { posts } = props;
  return <Cards posts={posts} title={"SSR"} />;
};
export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return { props: { posts } };
};
export default Ssr;

getStaticProps

SSGを行いたい時にgetStaticPropsという名前で関数を定義します。

import { GetStaticProps, NextPage } from "next";
import { Cards } from "./components/Cards";

type Props = {
  posts: Array<{ id: string; title: string }>;
};
const Ssg: NextPage<Props> = (props) => {
  const { posts } = props;
  return <Cards posts={posts} title={"SSG"} />;
};
export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return { props: { posts } };
};
export default Ssg;

getStaticeProps

ISRを行いたい時にgetStaticPropsという名前で関数を定義します。（SSGとほとんど同じ記述です。）

returnの revalidateに秒数を指定することで、指定秒数後、再生成が実行されます。

import { GetStaticProps, NextPage } from "next";
import { Cards } from "./components/Cards";

type Props = {
  posts: Array<{ id: string; title: string }>;
};
const Isr: NextPage<Props> = (props) => {
  const { posts } = props;
  return <Cards posts={posts} title={"ISR"} />;
};
export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return { props: { posts }, revalidate: 10 };
};
export default Isr;

オカ

上のコード例で動きは確認できたので、今後実際にアプリ開発をしていく際に、もう少し詳しく調べてみようと思います―！