Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSR / SSR / SSG / JAMstack
Search
Kaneko Takeshi
December 01, 2020
Technology
0
50
CSR / SSR / SSG / JAMstack
Kaneko Takeshi
December 01, 2020
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
10
Eye Tracking on the Browser
tkckaneko
0
72
IEEE754を完全に理解した
tkckaneko
1
50
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
70
多分これが一番早いと思います
tkckaneko
0
23
暗黒面の話
tkckaneko
0
14
BOLT
tkckaneko
0
10
CSS Logical Properties and Values
tkckaneko
0
24
Visual Effect Graphをさわってみた
tkckaneko
0
21
Other Decks in Technology
See All in Technology
本当のAWS基礎
toru_kubota
1
620
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
web-application-security
matsuihidetoshi
1
190
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
510
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
140
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
330
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
Next.js に疲れた私は Vue3 に癒やされた
akagire
0
130
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
130
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
26
5.8k
Building an army of robots
kneath
300
41k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Why Our Code Smells
bkeepers
PRO
331
56k
Clear Off the Table
cherdarchuk
85
310k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
How GitHub (no longer) Works
holman
305
140k
Designing the Hi-DPI Web
ddemaree
276
33k
Transcript
CSR / SSR / SSG JAMstack
CSR(Client Side Rendering) ブラウザ(クライアントサイド)でコンテンツをレンダリング する - SPA(シングルページアプリケーション)とかがコレ - WEBサーバーがなくていい -
ページ遷移とかも速い - 最近はbotもJavaScriptを実行できるのでSEOは問題ない - でも、OGPとかは無理 - 初回ロードは遅い
SSR(Server Side Rendering) リクエストを受け取ってからWEBサーバ上でコンテンツ をレンダリングしてから返す - 初回のロードが速い - OGPとか気にしなくていい -
でも、WEBサーバが必要 - レンダリングがクライアント上とは異なる ※ windowとかdocumentオブジェクトがない
SSG(Static Site Generator) 動的なコンテンツを含めレンダリングしてデプロイし、リク エストに対して静的なファイルを返す - 初回のロードがめっちゃ速い - OGPとか気にしなくていい -
WEBサーバもいらない - 動的なコンテンツの場合、データの変更があればレンダリングし 直す必要がある - レンダリングがクライアント上とは異なる
JAMstack(SSG + CSR) 初回のリクエストにはSSGで返して、ページ遷移など以 降はCSRとして振る舞う - 初回のロードがめっちゃ速い - OGPとか気にしなくていい -
WEBサーバもいらない - ログイン認証とかCSRで行うのである程度行える - もちろん動的なコンテンツの場合、データの変更があればレン ダリングし直す必要がある - レンダリングがクライアント上とは異なる
他にもNext.jsのincremental static regenerationとか あるみたいだけど、詳しくないので雑に説明すると - SSR + SSG + CSRみたいなやつ
- 初回はSSRだけど、2回め以降はSSGで、CSRもする - Vercelとかホスティングサービス?を使うらしい
ちなみにCSRでのOGPを解決する方法としてnetlifyの Prerenderingって機能がある ※ まだベータ版です
おしまい