Next.js SSG SSRについて

Next.jsにはSSG、SSRという機能があります。本記事は自分の備忘録として記述しています。同じレベル感の方が少しでも参考になれば幸いです。

SSR(server side rendering)
SSRとは静的サイト生成の略です。
一般的なwebページはリクエストがありレスポンスとして当該のhtmlファイルが返却される。そのファイルにscriptタグなどを介してjsファイルをを見込み描画させていく仕様でした。(クライアントサイド・レンダリング（CSR)

ですが、現在はreact, Vueといったフレームワークは大量のjsファイルをクライアントサイドでレンダリングする為、アプリケーションの規模が大きくなるほど、renderingコストが増大しオーバーヘッド（描画まで時間がかかる）を生じる問題がありました。

その問題を回避するために考案されたのがSSRです。

SSRはjsファイルをレンダリングしHTML生成をサーバーサイドで事前に行っておいて、それをクライアントへ返却する仕様です。

一見これで描画までのオーバーヘッドを軽減できたと思いますが、ユーザーのリクエストごとにrendringしていきますのでオーバヘッドは避けれないです。
そこで考案されたのがSSGでした。

SSG( static site generation)
SSGとは静的サイト生成のことです。
これまでの話だと、結局リクエスがある度にレンダリングを行うことでオーバーヘッドを生じていました。

そこで、動的ファイルをhtmlへ事前構築しておいて(fetchしてデータを事前取得)、リクエスがある時に構築したhtmlを返却させる仕様をSSGで実現しました。

SSGはビルドのタイミングで各ページをhtmlとして構築します。
SSRとの大きな違いは使い回しが可能である点。CDNを活用することで一度生成した,htmlファイルを使いまわせることができます。

これが意味することはrendringコストが軽減するだけではなく、レイテンシーの改善にも繋がります。

これを踏まえて実際のSSGのコードを記述。

import { Layout } from "../componets/Layouts";
import { getAllPostsData  } from "../lib/posts";
import { Post } from "../componets/Post"

const Blog = ({ posts }) => {
 return (
   <Layout title="Blog">
     <div>
       { posts && posts.map( post => <Post key={post.id} post={post}/>) }
     </div>
   </Layout>
 );
}

export default Blog;

export async function getStaticProps () {
 const posts = await getAllPostsData();

 return {
   props: { posts },
 }
}


//apis
import fetch from "node-fetch";

const apiUrl = "https://jsonplaceholder.typicode.com/posts";

export const getAllPostsData = async () => {
 const res = await fetch(new URL(apiUrl));
 const posts = await res.json();
 return posts
}
​

SSGを実現するためにはgetStaticProps()を仕様します。
このコードでAPIコールを行い。取得したデータをpropsとして当該のcomponetに流し込みます。これをbuildすれば、HTMLファイルが生成されるという流れになります。

終わりに
SSGだけではなく、ISRといった機能もあるのでまた学習していきます。