シンプルなブログアーキテクチャの作成

---
title: 'プリレンダリングの2つの形式'
date: '2020-01-01'
---
 
Next.jsには、プリレンダリングの2つの形式があります：**静的生成 (Static Generation)** と **サーバーサイドレンダリング (Server-side Rendering)** です。違いは、ページのHTMLを**いつ**生成するかにあります。
 
- **静的生成**は、**ビルド時**にHTMLを生成するプリレンダリング方法です。プリレンダリングされたHTMLは、各リクエストで_再利用_されます。
- **サーバーサイドレンダリング**は、**各リクエストごと**にHTMLを生成するプリレンダリング方法です。
 
重要な点として、Next.jsでは各ページに対して使用するプリレンダリング形式を**選択**できます。ほとんどのページに静的生成を使用し、他のページにサーバーサイドレンダリングを使用することで、「ハイブリッド」なNext.jsアプリを作成できます。

---
title: '静的生成とサーバーサイドレンダリングの使い分け'
date: '2020-01-02'
---
 
可能な限り**静的生成**（データあり・なし両方）を使用することをお勧めします。なぜなら、ページは一度ビルドされ、CDNによって配信されるため、サーバーが毎回ページをレンダリングするよりもはるかに高速だからです。
 
静的生成は、以下のような多くの種類のページに使用できます：
 
- マーケティングページ
- ブログ投稿
- Eコマース商品リスト
- ヘルプとドキュメント
 
「ユーザーのリクエストに先立ってこのページをプリレンダリングできるか？」と自問してください。答えが「はい」なら、静的生成を選択すべきです。
 
一方、ユーザーのリクエストに先立ってページをプリレンダリングできない場合、静的生成は**良いアイデアではありません**。たとえば、ページに頻繁に更新されるデータが表示され、ページの内容がリクエストごとに変更される場合です。
 
そのような場合は、**サーバーサイドレンダリング**を使用できます。速度は遅くなりますが、プリレンダリングされたページは常に最新の状態になります。または、プリレンダリングをスキップし、クライアントサイドJavaScriptを使用してデータを取得することもできます。

npm install gray-matter

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
 
const postsDirectory = path.join(process.cwd(), 'posts');
 
export function getSortedPostsData() {
  // /posts 配下のファイル名を取得
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // ファイル名から ".md" を削除してidを取得
    const id = fileName.replace(/\.md$/, '');
 
    // マークダウンファイルを文字列として読み込む
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
    // gray-matterを使用して投稿のメタデータセクションを解析
    const matterResult = matter(fileContents);
 
    // データとidを結合
    return {
      id,
      ...matterResult.data,
    };
  });
  // 投稿を日付でソート
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}