【初学者向け】CSR / SSR / SSG / ISRとは？架空アプリでレンダリング手法の違いを理解しよう！ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/09/27 24 users ISR SSG クライ ラクス SSR

初めまして！新卒1年目のmochi_proteinと申します。 CSR / SSR / SSG / ISRがどのような概念か、 架空アプリを例として、それぞれの違いを初学者向けにやさしく解説していきます！ 🔖目次は以下の通りです🔖 はじめに 架空アプリ「楽楽鮮魚」の仕様 前提知識 レンダリングとは？ 動的にHTMLを生成するとは？ CSR（クライ... 続きを読む

【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita

2024/03/08 28 users Next.js ＣＳＲ リクエスト サーバー クライアント

Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることによ... 続きを読む

パフォーマンス観点でみる Next.js の getLayout

2022/05/20 68 users 利点 パフォーマンス 最低限 ユーザー操作 ページ単位

Next.js は、ページ単位でデータ取得・レンダリング手法を選べる事が利点です。そして、ページ単位でチャンクファイルが生成される事が、パフォーマンスに貢献します。 これはあるページに来訪した際、必要最低限のファイルロードで済むということです。このロード時間（ファイルサイズ）が、ユーザー操作が開始できるま... 続きを読む