Submit Search
Upload
React系(別言語含む)の サーバーサイドレンダリング について考えよう
•
3 likes
•
7,817 views
Kazuhiro Hara
Follow
SPAとSSR、現実解について考えてみる Okachi.jsでの発表資料です
Read less
Read more
Technology
Report
Share
Report
Share
1 of 29
Download now
Download to read offline
Recommended
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Yutaro Miyazaki
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
Crawler Commons
Crawler Commons
chibochibo
LocalStack
LocalStack
chibochibo
Recommended
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Yutaro Miyazaki
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
Crawler Commons
Crawler Commons
chibochibo
LocalStack
LocalStack
chibochibo
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
kidach1
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
[大図解]ピグライフはこう動いている
[大図解]ピグライフはこう動いている
Akihiro Kuwano
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
崇之 清水
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
WheetTweet
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話
Kentaro Kitagawa
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜
Masashi MATSUI
Couch Db勉強会0623 by yssk22
Couch Db勉強会0623 by yssk22
Yohei Sasaki
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
Tsutomu Kawamura
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Osc2012.dbに行ってきました
Osc2012.dbに行ってきました
Masaru Kobashigawa
localstackによるAWS Lambdaの開発環境を、miniconda上でつくったら簡単便利だった話
localstackによるAWS Lambdaの開発環境を、miniconda上でつくったら簡単便利だった話
真治 米田
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
More Related Content
What's hot
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
kidach1
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
[大図解]ピグライフはこう動いている
[大図解]ピグライフはこう動いている
Akihiro Kuwano
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
崇之 清水
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
WheetTweet
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話
Kentaro Kitagawa
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜
Masashi MATSUI
Couch Db勉強会0623 by yssk22
Couch Db勉強会0623 by yssk22
Yohei Sasaki
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
Tsutomu Kawamura
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Osc2012.dbに行ってきました
Osc2012.dbに行ってきました
Masaru Kobashigawa
localstackによるAWS Lambdaの開発環境を、miniconda上でつくったら簡単便利だった話
localstackによるAWS Lambdaの開発環境を、miniconda上でつくったら簡単便利だった話
真治 米田
What's hot
(20)
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
One Time Binding & Digest Loop
One Time Binding & Digest Loop
[大図解]ピグライフはこう動いている
[大図解]ピグライフはこう動いている
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜
Couch Db勉強会0623 by yssk22
Couch Db勉強会0623 by yssk22
TypeScriptへの入口
TypeScriptへの入口
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
React+fluxを導入した話
React+fluxを導入した話
Osc2012.dbに行ってきました
Osc2012.dbに行ってきました
localstackによるAWS Lambdaの開発環境を、miniconda上でつくったら簡単便利だった話
localstackによるAWS Lambdaの開発環境を、miniconda上でつくったら簡単便利だった話
Viewers also liked
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
メルカリアッテの実務で使えた、GAE/Goの開発を効率的にする方法
メルカリアッテの実務で使えた、GAE/Goの開発を効率的にする方法
Takuya Ueda
Viewers also liked
(8)
React を導入したフロントエンド開発
React を導入したフロントエンド開発
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
今からでも遅くない! React事始め
今からでも遅くない! React事始め
メルカリアッテの実務で使えた、GAE/Goの開発を効率的にする方法
メルカリアッテの実務で使えた、GAE/Goの開発を効率的にする方法
Similar to React系(別言語含む)の サーバーサイドレンダリング について考えよう
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Kazuhiro Hara
Gatsby & React Static
Gatsby & React Static
Kazuhiro Hara
PySpark Intro Part.2 with SQL Graph
PySpark Intro Part.2 with SQL Graph
Oshitari_kochi
Play frameworkの概要
Play frameworkの概要
Shuhei Kaneko
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
ServerSideJavaScript
ServerSideJavaScript
Ryunosuke SATO
GraphQLはどんな時に使うか
GraphQLはどんな時に使うか
Yutaka Tachibana
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
chuck h
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
ネットワークプログラマビリティ勉強会 これまでのおさらい
ネットワークプログラマビリティ勉強会 これまでのおさらい
npsg
Unityでreflection入門
Unityでreflection入門
Yoshiteru Takeshita
Start SQL Server with Docker
Start SQL Server with Docker
Oshitari_kochi
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Ignite 2021秋 recap - 開発者向け新機能紹介
Ignite 2021秋 recap - 開発者向け新機能紹介
Kazushi Kamegawa
20201102 postgresql unconference_debility
20201102 postgresql unconference_debility
Satoshi Hirata
RakSulのInternal API開発で gRPCを導入した話
RakSulのInternal API開発で gRPCを導入した話
nixiesan
AmebaのMongoDB活用事例
AmebaのMongoDB活用事例
Akihiro Kuwano
Similar to React系(別言語含む)の サーバーサイドレンダリング について考えよう
(20)
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Gatsby & React Static
Gatsby & React Static
PySpark Intro Part.2 with SQL Graph
PySpark Intro Part.2 with SQL Graph
Play frameworkの概要
Play frameworkの概要
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Angular js or_backbonejs
Angular js or_backbonejs
ServerSideJavaScript
ServerSideJavaScript
GraphQLはどんな時に使うか
GraphQLはどんな時に使うか
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Web制作勉強会 #2
Web制作勉強会 #2
ネットワークプログラマビリティ勉強会 これまでのおさらい
ネットワークプログラマビリティ勉強会 これまでのおさらい
Unityでreflection入門
Unityでreflection入門
Start SQL Server with Docker
Start SQL Server with Docker
Groovyコンファレンス
Groovyコンファレンス
Ignite 2021秋 recap - 開発者向け新機能紹介
Ignite 2021秋 recap - 開発者向け新機能紹介
20201102 postgresql unconference_debility
20201102 postgresql unconference_debility
RakSulのInternal API開発で gRPCを導入した話
RakSulのInternal API開発で gRPCを導入した話
AmebaのMongoDB活用事例
AmebaのMongoDB活用事例
More from Kazuhiro Hara
MDX with Next.js
MDX with Next.js
Kazuhiro Hara
MDX and Next.js
MDX and Next.js
Kazuhiro Hara
About Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend Day
Kazuhiro Hara
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
Kazuhiro Hara
Clojure.tokyo.descjop
Clojure.tokyo.descjop
Kazuhiro Hara
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介
Kazuhiro Hara
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
Kazuhiro Hara
Cryogenでサイトつくろーじぇん
Cryogenでサイトつくろーじぇん
Kazuhiro Hara
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
Kazuhiro Hara
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
Kazuhiro Hara
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会
Kazuhiro Hara
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
Kazuhiro Hara
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
Kazuhiro Hara
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころ
Kazuhiro Hara
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイ
Kazuhiro Hara
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Kazuhiro Hara
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
Kazuhiro Hara
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
Kazuhiro Hara
Play FrameworkとWeb Socketの話
Play FrameworkとWeb Socketの話
Kazuhiro Hara
More from Kazuhiro Hara
(20)
MDX with Next.js
MDX with Next.js
MDX and Next.js
MDX and Next.js
About Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend Day
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
Clojure.tokyo.descjop
Clojure.tokyo.descjop
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
Cryogenでサイトつくろーじぇん
Cryogenでサイトつくろーじぇん
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころ
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイ
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
Play FrameworkとWeb Socketの話
Play FrameworkとWeb Socketの話
Recently uploaded
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Recently uploaded
(10)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
React系(別言語含む)の サーバーサイドレンダリング について考えよう
1.
React系(別言語含む)の サーバーサイドレンダリング について考えよう SPAとSSR、現実解について考えてみる 2016/10/07 Okachi.js vol.0
2.
登壇者 {:company “Greative.GK” :name “Kazuhiro
Hara” :twitter “@kara_d” :interest “SPA, WebVR, Clojure, Design research”}
3.
Clojure / ClojureScript
でElectronアプリケーションを 作るためのスターターキット / プラットホーム ● オープンソースにてGitHubにて公開 ● MITライセンス ● 現在のスター数 : 230 http://descjop.org/
4.
先週、こんな発表をしました http://www.slideshare.net/karadweb/clojure-react
5.
React系のサーバーサイドレンダリングについて ● そもそもサーバーサイドレンダリングって何さ? ○ というかSPAって何? ○
以下SSRとだけ書きます ● SSRどこが使っているか? ● SSRやってみたことある? ○ システム構成図、従来の Webアプリとの違い ○ Node.jsをサーバにしないケースのパターンについて ● SSRのアリ、ナシ、メリットデメリット、コスト感、難しそうな部分 ● SSRが有効なサイト、あまりよくないサイト
6.
SPAとSSR って何?話
7.
SPAについて ● シングルページWebアプリケーション(SPA)は、 最近注目を集めている Webアプリケーションのアーキテクチャです。 SPAは、ユーザがアプリケーションを使っている間、
Webページ全体をロードすることがなく、 レスポンスが高速で UI/UXに優れているという利点を持っています。 かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、 近年ではJavaScriptを使ったSPAが現実的になってきています。 http://www.oreilly.co.jp/books/9784873116730/
8.
SPAの例 Pintarest https://jp.pinterest.com/
9.
SSR(サーバーサイドレンダリング)について (Reactベースのアプリケーションの文脈で) ● Webアプリケーションに用意されているURLにアクセスした時に、 DOMの構築をフロントエンド側で行うと、一瞬表示されていない状態になる ● 初期表示状態が決まっているなら、 サーバー側で初期状態のDOMレンダリングを完了した状態で返せばいい ●
共通の半描画状態の画面を出したりローディング画像を出すアプローチもある
10.
なぜSSRなのか?について ● URLに対する情報のアクセシビリティ・セマンティック性を確保しておく ○ ブラウザを通したURLに対するアクセシビリティ・セマンティック性とは少し別 ○
SEOの問題はあまり心配しなくていいらしい (自分で実験したわけではない ) ● パフォーマンスの問題 ○ ブラウザでURLを直接アクセスした時に表示が完了するまでの時間の短縮化
11.
SSRと一口に言っても? ● React標準のスタイルでサポートされているやり方 ○ react-dom/serverを使う ■
https://facebook.github.io/react/docs/environments.html ● 上記と同じことを他言語環境でエミュレートする ● せめてJSON部分だけHTMLに埋め込む ○ TwitterやFacebookなど ● 原始的に出力するdivを切り分けて読み込み後は元のdivを消すとか... <div id=”ssr”> ここにサーバーで出力した結果を埋め込む </div> <div id=”react-app”> ここはReactが使う</div>
12.
アーキテクチャの違い(ざっくり) 従来のWebApp APIベースのWebApp SSR込みのWebApp WebApp & View BrowserHTML WebApp & JSON & layout Browser Base HTML JSON WebApp & View BrowserHTML WebApp & JSON & layout BrowserJSON URLアクセス時 URLアクセス時 URLアクセス時 画面遷移時
13.
そもそもSSRする必要があるのか? ある ない Reactで複雑な状態遷移を扱うようなことが前提のWebアプリケーションなら、 Accessible Rich Internet
Applications(WEI-ARIA)を全力で頑張る方向に 倒したほうが良くないか? ☞
14.
なぜn言語(JavaScript以外)でのSSRは難しいか n言語に限らず難しい問題(react-rails, React.NET, react-python,
react-php-v8jsなど は公式に出ている...) ● Reactのレンダリングは、同一のものをHTMLに埋め込んで返せばいい訳ではない ○ data-reactidの指定と、data-react-checksumの指定が必要 ○ data-reactidを埋め込んだHTMLに対してadler32でチェックサムを作成 ○ ただ、0.14.0 -> 15.0で少し変更があった (data-reactidベースからdata-reactrootベースへ) ■ https://facebook.github.io/react/blog/2016/04/07/react-v15.html ● Reactと違うエコシステム、違うテンプレートスタイル
15.
Java系での実装方法 大きく分けて2種類 ● 独自にReactのdomを再実装 ● Javaのnashornを利用 ●
別の道... Node.jsサーバーを立てる
16.
SSRどこ使話
17.
SSR採用サイト IDEO https://www.ideo.com/jp/
18.
SSR採用サイト Netflix https://www.netflix.com/jp/
19.
SSR使っていない例 Instagram https://www.instagram.com/
20.
その他、SSR使っているところ 知ってたら教えてください!(ここに書きます)
21.
SSRやってみたことある話
22.
SSRやってみた方 ● どんなやり方で? ● どういうタイプのサイトで?
23.
原の場合(要参照) http://www.slideshare.net/karadweb/clojure-react
24.
SSRのアリ、ナシ、 メリットデメリット、 コスト感、難しそうな部分
25.
アリ、ナシ、メリットデメリット、コスト感、難しそう? ● みんなで考えてみましょう HTML CSS
Client / JSServer / JSServer / TmplServer / CtrlServer / Model
26.
SSRどこで活きるのか
27.
SSRが有効なサイト、あまりよくないサイトまとめ ● みんなで考えてみましょう
28.
Okachi.js 第1回目の予定 2016/11/18 Okachi.js vol.1
29.
Okachi.js vol.1 なにやる? ●
React Nativeアプリ -> [日野さん] ● Electron ● ハイブリッドiPhone & Android ● Web VR -> [原話す、ちょっとだけ] ● npmパッケージマネージャー(橋本氏ライブラリリリース) ● Virtual Domコード・リーディング ● SPA(WAI-ARIA) -> [] ● Swift(?) -> Okachi.swiftにて ● Angular JS 2.0 ● Node Red -> [永井さん、ちょっとだけ] ● Plone のフロントエンド -> [寺田さん] ● サーバーレス系 : firebase ● プログレッシブWebアプリ ● HTTP2 ● Service Worker
Download now