SlideShare a Scribd company logo
で ISR
Development n-kato
もくじ
l 背景
l Next.js
l できること
l 特徴
l ファイルベースルーティング
l SSG (Static Site Generation)
l SSR (Server Side Rendering)
l ISR (Incremental Static Regeneration)
l レンダリングの使い分け
l まとめ
背景
React 製の SPA (Single Page Application) サイト
一般的に SEO に弱い
Google のクローラは JavaScript もしっかり読んでくれるらしい
インデックスされるまでの時間が通常のサイトよりも遅い
Next.js でサーバーサイドレンダリングができる
最初に返されるページは真っ白
Gatsby.js Nuxt.js VuePress
Next.js
The React Framework
for Production
👉 React 用のフロントエンドフレームワーク
👉 ページごとにレンダリング方法を変更可能
👉 TypeScript サポート
Next.js / できること
👉 ファイルシステムルーティング
👉 ページごとの SSG + SSR + ISR
👉 開発環境でのファストリフレッシュ
👉 画像最適化
👉 ルートプリフェッチ
👉 ゼロコンフィグ
...etc
Next.js / 特徴 / ファイルシステムルーティング 1
Next.js を使わず react-router を使う場合
Next.js / 特徴 / ファイルシステムルーティング 2
Next.js を使う場合
/pages 配下にフォルダ・ファイルを配置するだけでルートとして設定される
http://localhost:3000
http://localhost:3000/posts/3
Next.js / 特徴 / ファイルシステムルーティング 3
受け取ったパラメータは params で取得
それをもとに API などからデータを取得
取得したデータをコンポーネントで表示する
Next.js / 特徴 / SSG 1
👉 初回ビルド時に全てのページを生成
👉 ユーザのリクエストの対して生成し
たページを毎回返す
👉 CDN も使えるためかなり高速
👉 ユーザのリクエストに応じてページ
内容を変更することはできない
向いているページ:マーケティングページ、ブログ、ドキュメントページなど
Next.js / 特徴 / SSG 2
単純に静的ファイルを置いた場合との違い
ビルド時にデータソースからデータを取得しページを生成できること
JAMstack
JavaScript APIs Markup
ビルド
データソース
API
ブラウザ 静的ページ
Next.js / 特徴 / SSR
👉ユーザのリクエストの度にページを
生成する
👉 常に最新状態を維持できる
👉 SPA と比べて SEO で有利
👉 リクエストの度にページを生成する
ため SSG より遅い
向いているページ:タイムライン、動的コンテンツを含むが SEO を意識したいページなど
Next.js / 特徴 / ISR 1
👉 ユーザのリクエスト時に前回生成し
たページを返す
👉 リクエスト後にバックグラウンドで
ビルド
👉 SSG と同じく高速
👉 動的コンテンツを扱える
向いているページ:強整合性が必要なページ以外全て
Incremental Static Regeneration
③ 最新データ取得
データソース
API
ブラウザ
① リクエスト
WEB
② 前回生成
したページ
④ 最新データ
でビルド
HTML
Next.js / 特徴 / ISR 2
getStaticProps の中で revalidate を指定するだけ
revalidate を 10 に設定した場合、最初のリクエストから
10 秒以内のリクエスト → 古いページを返す
10 秒以上経ってからのリクエスト → 古いページを返しつつバックグラウンドでビルド
Next.js / レンダリングの使い分け
Next.js はページごとにレンダリングを変更可能
変更がほとんど必要ないページ 👉 SSG (Static Site Generation)
SEO が重要かつページネーションが必要なページ 👉 SSR (Server Side Rendering)
強整合性が求められないページ 👉ISR (Incremental Static Regeneration)
強整合性が必要なページ 👉CSR (Client Side Rendering)
アプリケーションの特性に応じて柔軟に対応できる
まとめ
Next.js はイイぞ
ありがとうございました!
Development n-kato

More Related Content

What's hot

ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Springドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
増田 亨
 
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
 
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
 
スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)
スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)
スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)
NTT DATA Technology & Innovation
 
three.jsを「遅い」と思わせないデータの扱い方
three.jsを「遅い」と思わせないデータの扱い方three.jsを「遅い」と思わせないデータの扱い方
three.jsを「遅い」と思わせないデータの扱い方
jey en
 
ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善
増田 亨
 
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
A AOKI
 
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探しリッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
 
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Tetsutaro Watanabe
 
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
Miki Shimogai
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
 
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
 
何をどう学ぶか?
何をどう学ぶか?何をどう学ぶか?
何をどう学ぶか?nishio
 
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primerオブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
増田 亨
 
今秋リリース予定のPostgreSQL11を徹底解説
今秋リリース予定のPostgreSQL11を徹底解説今秋リリース予定のPostgreSQL11を徹底解説
今秋リリース予定のPostgreSQL11を徹底解説
Masahiko Sawada
 
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
 
リーンなコードを書こう:実践的なオブジェクト指向設計
リーンなコードを書こう:実践的なオブジェクト指向設計リーンなコードを書こう:実践的なオブジェクト指向設計
リーンなコードを書こう:実践的なオブジェクト指向設計
増田 亨
 

What's hot (20)

ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Springドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
 
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
 
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
 
スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)
スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)
スケールアウトするPostgreSQLを目指して!その第一歩!(NTTデータ テクノロジーカンファレンス 2020 発表資料)
 
three.jsを「遅い」と思わせないデータの扱い方
three.jsを「遅い」と思わせないデータの扱い方three.jsを「遅い」と思わせないデータの扱い方
three.jsを「遅い」と思わせないデータの扱い方
 
ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善
 
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
 
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探しリッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
 
MapReduce入門
MapReduce入門MapReduce入門
MapReduce入門
 
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
 
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
PostgreSQLクエリ実行の基礎知識 ~Explainを読み解こう~
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
 
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
 
何をどう学ぶか?
何をどう学ぶか?何をどう学ぶか?
何をどう学ぶか?
 
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primerオブジェクト指向プログラミング入門 -- Java object-oriented programming primer
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
 
能動学習セミナー
能動学習セミナー能動学習セミナー
能動学習セミナー
 
今秋リリース予定のPostgreSQL11を徹底解説
今秋リリース予定のPostgreSQL11を徹底解説今秋リリース予定のPostgreSQL11を徹底解説
今秋リリース予定のPostgreSQL11を徹底解説
 
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
 
リーンなコードを書こう:実践的なオブジェクト指向設計
リーンなコードを書こう:実践的なオブジェクト指向設計リーンなコードを書こう:実践的なオブジェクト指向設計
リーンなコードを書こう:実践的なオブジェクト指向設計
 

Similar to Next.jsでISR

An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter BootstrapKevingo Tsai
 
Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009
Arun Gupta
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?martinlippert
 
Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019
Stefan Adolf
 
Web Development: Making it the right way
Web Development: Making it the right wayWeb Development: Making it the right way
Web Development: Making it the right way
Yagiz Nizipli
 
Java Script recruiting
Java Script recruitingJava Script recruiting
Java Script recruiting
Ihor Odynets
 
React Server Side Rendering with Next.js
React Server Side Rendering with Next.jsReact Server Side Rendering with Next.js
React Server Side Rendering with Next.js
Jamie Barton 👨🏻‍💻
 
Hybrid Application Development
Hybrid Application DevelopmentHybrid Application Development
Hybrid Application Development
Yagiz Nizipli
 
Next.js Introduction
Next.js IntroductionNext.js Introduction
Next.js Introduction
Saray Chak
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
 
Where does Laravel fit in the Jamstack concept?
Where does Laravel fit in the Jamstack concept?Where does Laravel fit in the Jamstack concept?
Where does Laravel fit in the Jamstack concept?
Tihomir Opačić
 
Dynamic Languages & Web Frameworks in GlassFish
Dynamic Languages & Web Frameworks in GlassFishDynamic Languages & Web Frameworks in GlassFish
Dynamic Languages & Web Frameworks in GlassFish
IndicThreads
 
Get ready for Jamstack with Sitecore Experience Edge
Get ready for Jamstack with Sitecore Experience EdgeGet ready for Jamstack with Sitecore Experience Edge
Get ready for Jamstack with Sitecore Experience Edge
VarunNehra
 
React Native - Fabric review-2018-07-25
React Native - Fabric review-2018-07-25React Native - Fabric review-2018-07-25
React Native - Fabric review-2018-07-25
Parashuram N
 
Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)
Stefan Adolf
 
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
Koji Ishimoto
 
SceneJS
SceneJSSceneJS
SceneJS
Lindsay Kay
 
Intro to sbt-web
Intro to sbt-webIntro to sbt-web
Intro to sbt-web
Marius Soutier
 

Similar to Next.jsでISR (20)

An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter Bootstrap
 
Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
 
Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019
 
Web Development: Making it the right way
Web Development: Making it the right wayWeb Development: Making it the right way
Web Development: Making it the right way
 
Java Script recruiting
Java Script recruitingJava Script recruiting
Java Script recruiting
 
React Server Side Rendering with Next.js
React Server Side Rendering with Next.jsReact Server Side Rendering with Next.js
React Server Side Rendering with Next.js
 
Hybrid Application Development
Hybrid Application DevelopmentHybrid Application Development
Hybrid Application Development
 
Next.js Introduction
Next.js IntroductionNext.js Introduction
Next.js Introduction
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
Where does Laravel fit in the Jamstack concept?
Where does Laravel fit in the Jamstack concept?Where does Laravel fit in the Jamstack concept?
Where does Laravel fit in the Jamstack concept?
 
Dynamic Languages & Web Frameworks in GlassFish
Dynamic Languages & Web Frameworks in GlassFishDynamic Languages & Web Frameworks in GlassFish
Dynamic Languages & Web Frameworks in GlassFish
 
Get ready for Jamstack with Sitecore Experience Edge
Get ready for Jamstack with Sitecore Experience EdgeGet ready for Jamstack with Sitecore Experience Edge
Get ready for Jamstack with Sitecore Experience Edge
 
React Native - Fabric review-2018-07-25
React Native - Fabric review-2018-07-25React Native - Fabric review-2018-07-25
React Native - Fabric review-2018-07-25
 
Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)
 
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
 
Scenejs
ScenejsScenejs
Scenejs
 
SceneJS
SceneJSSceneJS
SceneJS
 
Intro to sbt-web
Intro to sbt-webIntro to sbt-web
Intro to sbt-web
 

Recently uploaded

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 

Next.jsでISR

  • 2. もくじ l 背景 l Next.js l できること l 特徴 l ファイルベースルーティング l SSG (Static Site Generation) l SSR (Server Side Rendering) l ISR (Incremental Static Regeneration) l レンダリングの使い分け l まとめ
  • 3. 背景 React 製の SPA (Single Page Application) サイト 一般的に SEO に弱い Google のクローラは JavaScript もしっかり読んでくれるらしい インデックスされるまでの時間が通常のサイトよりも遅い Next.js でサーバーサイドレンダリングができる 最初に返されるページは真っ白 Gatsby.js Nuxt.js VuePress
  • 4. Next.js The React Framework for Production 👉 React 用のフロントエンドフレームワーク 👉 ページごとにレンダリング方法を変更可能 👉 TypeScript サポート
  • 5. Next.js / できること 👉 ファイルシステムルーティング 👉 ページごとの SSG + SSR + ISR 👉 開発環境でのファストリフレッシュ 👉 画像最適化 👉 ルートプリフェッチ 👉 ゼロコンフィグ ...etc
  • 6. Next.js / 特徴 / ファイルシステムルーティング 1 Next.js を使わず react-router を使う場合
  • 7. Next.js / 特徴 / ファイルシステムルーティング 2 Next.js を使う場合 /pages 配下にフォルダ・ファイルを配置するだけでルートとして設定される http://localhost:3000 http://localhost:3000/posts/3
  • 8. Next.js / 特徴 / ファイルシステムルーティング 3 受け取ったパラメータは params で取得 それをもとに API などからデータを取得 取得したデータをコンポーネントで表示する
  • 9. Next.js / 特徴 / SSG 1 👉 初回ビルド時に全てのページを生成 👉 ユーザのリクエストの対して生成し たページを毎回返す 👉 CDN も使えるためかなり高速 👉 ユーザのリクエストに応じてページ 内容を変更することはできない 向いているページ:マーケティングページ、ブログ、ドキュメントページなど
  • 10. Next.js / 特徴 / SSG 2 単純に静的ファイルを置いた場合との違い ビルド時にデータソースからデータを取得しページを生成できること JAMstack JavaScript APIs Markup ビルド データソース API ブラウザ 静的ページ
  • 11. Next.js / 特徴 / SSR 👉ユーザのリクエストの度にページを 生成する 👉 常に最新状態を維持できる 👉 SPA と比べて SEO で有利 👉 リクエストの度にページを生成する ため SSG より遅い 向いているページ:タイムライン、動的コンテンツを含むが SEO を意識したいページなど
  • 12. Next.js / 特徴 / ISR 1 👉 ユーザのリクエスト時に前回生成し たページを返す 👉 リクエスト後にバックグラウンドで ビルド 👉 SSG と同じく高速 👉 動的コンテンツを扱える 向いているページ:強整合性が必要なページ以外全て Incremental Static Regeneration ③ 最新データ取得 データソース API ブラウザ ① リクエスト WEB ② 前回生成 したページ ④ 最新データ でビルド HTML
  • 13. Next.js / 特徴 / ISR 2 getStaticProps の中で revalidate を指定するだけ revalidate を 10 に設定した場合、最初のリクエストから 10 秒以内のリクエスト → 古いページを返す 10 秒以上経ってからのリクエスト → 古いページを返しつつバックグラウンドでビルド
  • 14. Next.js / レンダリングの使い分け Next.js はページごとにレンダリングを変更可能 変更がほとんど必要ないページ 👉 SSG (Static Site Generation) SEO が重要かつページネーションが必要なページ 👉 SSR (Server Side Rendering) 強整合性が求められないページ 👉ISR (Incremental Static Regeneration) 強整合性が必要なページ 👉CSR (Client Side Rendering) アプリケーションの特性に応じて柔軟に対応できる