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

2024/09/27 24 users SSG クライ ラクス SSR レンダリング

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

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

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

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

モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ

2022/06/21 29 users クックパッド開発者ブログ SSG React クックパッド

こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発... 続きを読む

Remixの凄みを紹介したい

2022/05/26 83 users Remix Transcript Prisma SSR ＣＳＲ

Transcript 📀 Remix の凄みを紹介したい @aiji42_dev Who am I ? Uejima Aiji | Twitter: @aiji42_dev 🏢 株式会社エイチームライフデザイン 🧘 リードエンジニア 🥑 最近の活動 CloudflareでISRを実現したり CSRなサイトをPrerenderでSSRぽくしたり PrismaからSupabase APIを叩くミドルウェア作っ たり 社内でフロント... 続きを読む

触ってみてわかったNext.jsと比べた時のRemixの特徴

2021/11/23 14 users Remix SSG react-router Next.js

Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRは... 続きを読む

AWSでISRの実現!�その謎を解明すべくAmazonの奥地へと�足を踏み入れる!! / Digging how to running ISR on AWS

2021/09/30 13 users 奥地 AWS Amazon 実現

Transcript Singular Perturbations Inc Keisuke Nishitani CTO@ Singular Perturbations Inc Keisuke Nishitani @Keisuke69 Programming is a creative work. ? Love Music ♫ Love Camping ⛺ Blog: https://www.keisuke69.net/ ? Everything will be serverless. ⚡ カジュアル⾯談:https://meety.net/matches/kBtcR... 続きを読む

AWS AmplifyでNext.jsのISRを試してみる | DevelopersIO

2021/08/02 19 users Amplify TypeScript 備忘録 Next.js

まえがき AWS AmplifyでついにNext.jsのISRに対応したようです。実際にやってみる。 Deploy and host server-side rendered apps with Amplify - AWS Amplify 少しハマったので備忘録も兼ねて。 Amplify + Next.jsをデプロイ Next.jsのプロジェクトを作成 yarn create next-app --typescript ✔ What is your project nam... 続きを読む

ISR化でIESHILの建物詳細ページの読み込み速度を10倍に改善した話 - LIVESENSE ENGINEER BLOG

2021/05/31 12 users IESHIL 速度 目次 エンジニア 順番

初めに こんにちは、IESHILでエンジニアをしているgccjです。 IESHILはマンション査定価格がいますぐわかるサービスです。 2021年4月6日にその中でも一番アクセスされている建物詳細ページをISR（Incremental Static Regeneration）化しました。 それについて、目次の順番でご紹介していきたいと思います。 目次 前提--S... 続きを読む

Next.jsアプリをVercelからGCPに移行した話

2021/03/30 176 users GCP Vercel Zenn Next.jsアプリ 移行

ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGCPに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage Optimizationとい... 続きを読む

Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話 - パンダのプログラミングブログ

2020/12/26 15 users アドベントカレンダー スプレッドシート ペー パンダ 特定

Next.jsのISRを使って業務フローを変えた話 この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。 本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration（以下、ISR） とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のペー... 続きを読む

米国の偵察衛星、その進化の歴史 : ギズモード・ジャパン

2013/05/01 33 users 偵察衛星 ギズモード 米国 進化 ジャパン

ミリタリー系 米国の偵察衛星、その進化の歴史 2013.05.01 12:00 今や地上を15cm単位で見分けられるとか。 倫理的な問題はさておき、偵察活動は国家にとって欠かせないものになっています。ISR（インテリジェンス、監視、偵察）情報が集まれば、貿易交渉から軍事作戦まで、あらゆる分野の政策判断に役立てられます。中でも偵察衛星の重要性は、冷戦下の米国の偵察衛星の活躍によく表れています。これら... 続きを読む