タグ ISR
人気順 10 users 50 users 100 users 500 users 1000 users【初学者向け】CSR / SSR / SSG / ISRとは?架空アプリでレンダリング手法の違いを理解しよう! - RAKUS Developers Blog | ラクス エンジニアブログ
初めまして!新卒1年目のmochi_proteinと申します。 CSR / SSR / SSG / ISRがどのような概念か、 架空アプリを例として、それぞれの違いを初学者向けにやさしく解説していきます! 🔖目次は以下の通りです🔖 はじめに 架空アプリ「楽楽鮮魚」の仕様 前提知識 レンダリングとは? 動的にHTMLを生成するとは? CSR(クライ... 続きを読む
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR (Client Side Rendering) クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることによ... 続きを読む
Next.jsのISRを独自に実装する ~ レンダリングミドルウェアによるCSR/SPAサイトの高速化編 ~
この記事では、上で紹介しきれなかった、CSRなページ・SPAなコンテンツをスタティックなページに変換して配信するということについて紹介していきます。 前提となる情報は上の記事で述べられているため、まずはそちらをご覧ください。 全体像 上の記事にでも説明されていた概要図をそのまま引用しています。 本記事で説... 続きを読む
モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ
こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発... 続きを読む
Remixの凄みを紹介したい
Transcript 📀 Remix の凄みを紹介したい @aiji42_dev Who am I ? Uejima Aiji | Twitter: @aiji42_dev 🏢 株式会社エイチームライフデザイン 🧘 リードエンジニア 🥑 最近の活動 CloudflareでISRを実現したり CSRなサイトをPrerenderでSSRぽくしたり PrismaからSupabase APIを叩くミドルウェア作っ たり 社内でフロント... 続きを読む
触ってみてわかったNext.jsと比べた時のRemixの特徴
Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRは... 続きを読む
AWSでISRの実現!�その謎を解明すべくAmazonの奥地へと�足を踏み入れる!! / Digging how to running ISR on AWS
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
まえがき 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
初めに こんにちは、IESHILでエンジニアをしているgccjです。 IESHILはマンション査定価格がいますぐわかるサービスです。 2021年4月6日にその中でも一番アクセスされている建物詳細ページをISR(Incremental Static Regeneration)化しました。 それについて、目次の順番でご紹介していきたいと思います。 目次 前提--S... 続きを読む
Vercelを使わずにAWSだけでNext.jsのISR対応!【serverless-next.js】
※ 混乱させるかもしれないので一応、ところどころamplifyって出てきますが、apiの作成にamplify使っているだけで、デプロイとかにはホスティングにはamplify使ってないので。わかりにくくてすみません。 serverless-next.jsでISRに対応したNext.jsをデプロイのサポートが!ついに! つい先日こちらのプルリクがマージさ... 続きを読む
nextjsのISRを使うときのfallback指定について理解するまでの話
next.jsのISRを使おうとして「なんか全然うまく行かない」ってなってたのがやっと理解出来たのでメモ 問題編 とりあえず見様見真似でISRはrevalidateとfallbackつければ良いんだな?とやってみたところ、どうもpropsが空Objectになってしまうようで悩んでいた。 例えば下記のような場合、エラーが起きる // pages/greeti... 続きを読む
Next.jsアプリをVercelからGCPに移行した話
ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGCPに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage Optimizationとい... 続きを読む
Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話 - パンダのプログラミングブログ
Next.jsのISRを使って業務フローを変えた話 この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。 本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration(以下、ISR) とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のペー... 続きを読む
米国の偵察衛星、その進化の歴史 : ギズモード・ジャパン
ミリタリー系 米国の偵察衛星、その進化の歴史 2013.05.01 12:00 今や地上を15cm単位で見分けられるとか。 倫理的な問題はさておき、偵察活動は国家にとって欠かせないものになっています。ISR(インテリジェンス、監視、偵察)情報が集まれば、貿易交渉から軍事作戦まで、あらゆる分野の政策判断に役立てられます。中でも偵察衛星の重要性は、冷戦下の米国の偵察衛星の活躍によく表れています。これら... 続きを読む