UAParser.jsとはユーザーエージェント（User-Agent）からブラウザやエンジン、OS、CPU、デバイスの種類/モデルを検出するJavaScriptライブラリです。 今回はReactおよびNext.jsの環境…

以下の仕様のNext.jsアプリケーションの作成手順について紹介します。 Create Next AppでNext.jsの雛形を作成 今回はTypeScriptベースのNext.jsアプリケーションを作成するため、–t…

Next.jsのページはデフォルトでPre-renderingです。 ですので、 今回はNext.jsでSSR回避、つまりクライアントサイドでのみ処理を実行するように制御する方法について紹介します。 検証環境のnextは…

dynamic import（動的インポート）について dynamic import（動的インポート）とは動的にimportを実行するための機能です。ES2020でJavaScriptの仕様として導入されました。dyna…

ReactアプリケーションにおけるCSR・SSR・next/linkの挙動の違いについて4つの観点で紹介をします。 CSRはフレームワークを利用していないReactアプリケーション、SSRはNext.jsを利用したRea…

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Generation）です1。 サーバサイドではブラウザ…

Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ（操作可能）なページを生成する過程のことをいいます。Hydrationはクラ…

SSR/SGではレンダリング時にブラウザの機能を使えない 具体例は以下の通りです。 Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）…

Next.jsではページごと（pagesディレクトリ直下のコンポーネントごと）にレンダリングの種類を決められます。今回はレンダリング種別の決められ方と確認方法について紹介します。 検証環境のnextは11.1.2を利用し…

Next.jsの公式ドキュメントによるPre-renderingの説明は以下の通りです。1 上記のプロセスを手元のローカル環境で確認したところ、SSRとSGで初期ロードのタイミングが異なっていたので紹介します。 検証環境…

『SSR（Server-side Rendering）はサーバサイドでHTMLを生成する仕組み』『SG（Static Generation）は事前に生成した静的なHTMLを配信する仕組み』『CSR（Client-side…

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Site Generation）です。1 しかし、Nex…

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Generation）です。1 SSRとSGのどちらを採…