もう迷わないNext.jsのCSR/SSR/SSG/ISR
はじめに Next.jsで一番最初の詰まりどころと言えば、「CSR/SSR/SSG/ISRとあるけどデータ取得はどのやり方でやれば良いか」という点ではないでしょうか。 自分の中でようやくこの辺りの整理ができたので、この記事ではCSR/SSR/SSG/ISRとは何ぞやというところからそれぞれの使い分けについて書いていこうと思います。 CSR/SSR/SSG/ISRとは CSRとは CSRはClient Side Renderingの略で、日本語に訳すとクライアント側でのレンダリングです。 CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。 Reactのみを使ってSPAを作る場合にuseEffectの中でデータをfetchして結果をuseStateに渡して表示するというお馴染みのやり方です。 全てがクライア
Incremental Static Regeneration で実現する次世代のサーバーアーキテクチャ
next.js 9.4 に Incremental Static Regeneration という実験的な新機能があります。 Blog - Next.js 9.4 | Next.js パッと見、「段階的な静的サイト生成…？なんのことだろう…」となったのですが、手元で試してみた感じ、これが既存のサーバーの実装アプローチを変える、革命的な機能ではないかと思いました。 解説を書きつつ、どのような応用があるか解説します。 next.js の Incremental SSG を試してみる リポジトリはここです。 mizchi/issg-playground 解説にあたっては、必要なのはほぼこのファイルだけで、短いのでそのまま貼ります。 // pages/[slug].tsx import { GetStaticProps, GetStaticPaths } from "next"; type Pro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
