Next.js

【Next.js】CSR・SSR・SSGの違いをまとめる。あとISR・SWRもある。

Next.jsを勉強していて「CSR・SSR・SSG」の違いがわからなかったので、少し調べながらまとめてみました!かなりざっくりとした内容になっています。

もし間違っている部分がありましたら教えていただけると嬉しいです。

CSR

クライアントサイドレンダリング(Client Side Rendering)。ユーザーのブラウザ上でデータフェッチを行い、HTMLを組み立てる。

SEOに弱い。

SSR

サーバーサイドレンダリング(Server Side Rendering)。サーバー上でデータフェッチを行い、HTMLを組み立て、それをクライアントに返す。

サーバーの負荷が大きくなる可能性あり。

SSG

スタティックサイトジェネレーション(Static Site Generation)。ビルド時に事前にHTMLを生成して、リクエストが来たらそれを返す。

「更新性」と「大量ページの生成時の過負荷」が課題だけど、ISRとフォールバック設定で解決できる。

ISR(SSG + 更新性)

Incremental Static Regeneration。SSGに更新性が加えられたものです。ビルド時だけでなく、指定した間隔でHTMLを再生成します。

ISRでは、再生成されたデータは次回クライアントからのリクエスト時に反映される。

(インクリメンタルは「漸次的(少しずつ増やすこと)」、スタティックは「静的な」、リジェネレーションは「再生成」。つまり、静的ファイルを定期的に再生成しつつ、少しずつ増やしていくこと)

SWR(ISR + 即時反映性)

Stale While Revalidate。古いキャッシュ(Stale)を取得して表示している間に(While)、最新情報を取得してキャッシュを更新します(Revalidate)。

SWRでは、ISRで再生成されたデータを生成後すぐにクライアントに反映することができる。つまりISRに即時性を持たせたもの

まとめ

ほとんどのシチュエーションでは「ISR」か「SWR」で対応すればなんとかなる…のかなと感じました。

【Next.js】Imageコンポーネントで画像がエラーになった。

Next.jsの「Image」コンポーネントを使用してアバター画像を表示させようと思ったのですが、なぜかimgタグがエラーになってしまい表示されませんでした。

いろいろ調べたのですが解決策が見当たらず、試してなんとか表示されたのでその過程をメモしておきます。

Imageコンポーネントが上手くいかない…
表示されるはずの「localhost:3000/avatar.png」を開いても表示されない…

解決方法

画像ファイルの拡張子を変更したことで表示されるようになりました。(「.png」から「.jpeg」に変更)

※画像ファイルの場所は、エラー時も解消時も「public内(Next.jsプロジェクト直下)」に置いて特に変えていません。

変更前(エラー)

<Image
  src={"/avatar.png"}
  className="rounded-full"
  width={60}
  height={60}
  alt="Avatar"
/>

変更後(エラー解消)

<Image
  src={"/avatar.jpeg"}  // ←拡張子をjpegに変えた
  className="rounded-full"
  width={60}
  height={60}
  alt="Avatar"
/>
表示された…!!

エラーが起きた原因

原因を少し調べてみたのですが、よくわかりませんでした。

pngもサポートされているはずだし、ファイルサイズも特に問題なかったし…

詳しい方がいたらぜひ教えてください。。

【Pycharm】Next.jsで新しくファイルを作る時にパッとテンプレを作成する方法。

Next.jsでpages内に新しくファイルを作成する時、ある程度の書かないといけないことは決まっていてそれを毎回書いているのはちょっと面倒くさい。。そこでショートカットで出力できるようにする方法を調べたのでメモしておきます。

(VScodeで開発していることが多く、Pycharmの情報が少なかった…)

このテンプレをパッと作れるようになりたい

Pycharmのプラグインをインストールする

「React Snippets」「Tailwind Formatter」をインストール

Pycharmの「Preferences」→「Plugins」で下記2つをインストールしてください。

  • React Snippets
  • Tailwind Formatter

作成したファイルに「rsf」を打つ

rsf」と打つと下記のテンプレートを出力できる。(VScodeだと「rafce」??)

「rsf」を打つと候補が出てくる
import React from 'react';

function ContactPage(props) {
    return (
        <div></div>
    );
}

export default ContactPage;

早く作るためにこういうショートカットは覚えて行きたい。

https://stackoverflow.com/questions/63239809/webstorm-functional-snippet-react

【Next.js】Tailwindを導入する方法

Next.jsを利用している中で、Tailwindを導入してみました。

その過程をメモしていきます。

Tailwind CSSをインストールする

$ npm i tailwindcss@latest postcss@latest autoprefixer@latest

「tailwind.config.js」を生成する

$ npx tailwindcss init -p

「tailwind.config.js」を編集する

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",       // 追加
        "./components/**/*.{js,ts,jsx,tsx}",  // 追加(componentsフォルダがある場合)
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

content内の./components/*/.{js,ts,jsx,tsx}の部分は「componentsフォルダ内」のファイルでもTailwind.cssが適用されるようにしています。

他にも適用したいフォルダがある場合には、このcomponentsの部分を変更したり追加したりしてみてください。

「styles/global.css」を編集する

@tailwind base;
@tailwind components;
@tailwind utilities;

元々記載されているCSSは削除かコメントアウトする。

Tailwind導入完了。

これでclassNameにTailwind.cssの記載をすれば反映されます。

Tailwindが反映されない場合の対処法

既にローカルサーバーで起動している場合は、すぐに反映されないことがあります。その場合は再度起動してみてください。

$ npm run dev