Submit Search
Upload
Java + React.jsでSever Side Rendering #reactjs_meetup
•
38 likes
•
17,690 views
Toshiaki Maki
Follow
React.js meetup #1の LT資料です
Read less
Read more
Technology
Report
Share
Report
Share
1 of 32
Download now
Download to read offline
Recommended
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介
AdvancedTechNight
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
Akihiro Suda
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal
Toru Makabe
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
Serverless時代のJavaについて
Serverless時代のJavaについて
Amazon Web Services Japan
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
Recommended
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介
AdvancedTechNight
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
Akihiro Suda
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal
Toru Makabe
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
Serverless時代のJavaについて
Serverless時代のJavaについて
Amazon Web Services Japan
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
JustSystems Corporation
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
Takanori Sejima
AlmaLinux と Rocky Linux の誕生経緯&比較
AlmaLinux と Rocky Linux の誕生経緯&比較
beyond Co., Ltd.
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
速習!論理レプリケーション ~基礎から最新動向まで~(PostgreSQL Conference Japan 2022 発表資料)
速習!論理レプリケーション ~基礎から最新動向まで~(PostgreSQL Conference Japan 2022 発表資料)
NTT DATA Technology & Innovation
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
Masahito Zembutsu
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
NTT DATA Technology & Innovation
Keycloak入門
Keycloak入門
Hiroyuki Wada
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
NTT DATA OSS Professional Services
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
Yahoo!デベロッパーネットワーク
Elasticsearchを使うときの注意点 公開用スライド
Elasticsearchを使うときの注意点 公開用スライド
崇介 藤井
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
アーキテクチャから理解するPostgreSQLのレプリケーション
アーキテクチャから理解するPostgreSQLのレプリケーション
Masahiko Sawada
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
Ore Product
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
リクルートのWebサービスを支える「RAFTEL」
リクルートのWebサービスを支える「RAFTEL」
Recruit Technologies
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
Flowtype Introduction
Flowtype Introduction
Teppei Sato
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
More Related Content
What's hot
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
JustSystems Corporation
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
Takanori Sejima
AlmaLinux と Rocky Linux の誕生経緯&比較
AlmaLinux と Rocky Linux の誕生経緯&比較
beyond Co., Ltd.
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
速習!論理レプリケーション ~基礎から最新動向まで~(PostgreSQL Conference Japan 2022 発表資料)
速習!論理レプリケーション ~基礎から最新動向まで~(PostgreSQL Conference Japan 2022 発表資料)
NTT DATA Technology & Innovation
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
Masahito Zembutsu
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
NTT DATA Technology & Innovation
Keycloak入門
Keycloak入門
Hiroyuki Wada
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
NTT DATA OSS Professional Services
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
Yahoo!デベロッパーネットワーク
Elasticsearchを使うときの注意点 公開用スライド
Elasticsearchを使うときの注意点 公開用スライド
崇介 藤井
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
アーキテクチャから理解するPostgreSQLのレプリケーション
アーキテクチャから理解するPostgreSQLのレプリケーション
Masahiko Sawada
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
Ore Product
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
リクルートのWebサービスを支える「RAFTEL」
リクルートのWebサービスを支える「RAFTEL」
Recruit Technologies
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
What's hot
(20)
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
AlmaLinux と Rocky Linux の誕生経緯&比較
AlmaLinux と Rocky Linux の誕生経緯&比較
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
速習!論理レプリケーション ~基礎から最新動向まで~(PostgreSQL Conference Japan 2022 発表資料)
速習!論理レプリケーション ~基礎から最新動向まで~(PostgreSQL Conference Japan 2022 発表資料)
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
Keycloak入門
Keycloak入門
脱RESTful API設計の提案
脱RESTful API設計の提案
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
Elasticsearchを使うときの注意点 公開用スライド
Elasticsearchを使うときの注意点 公開用スライド
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
アーキテクチャから理解するPostgreSQLのレプリケーション
アーキテクチャから理解するPostgreSQLのレプリケーション
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
リクルートのWebサービスを支える「RAFTEL」
リクルートのWebサービスを支える「RAFTEL」
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Viewers also liked
Flowtype Introduction
Flowtype Introduction
Teppei Sato
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Khor SoonHin
Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS
Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS
Khor SoonHin
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
Tokuhiro Matsuno
Reactive Webアプリケーション - そしてSpring 5へ #jjug_ccc #ccc_ef3
Reactive Webアプリケーション - そしてSpring 5へ #jjug_ccc #ccc_ef3
Toshiaki Maki
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
Hastening React SSR - Web Performance San Diego
Hastening React SSR - Web Performance San Diego
Maxime Najim
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
Toshio Ehara
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」
Hiroaki NAKADA
Japanese Introduction to Oracle JET
Japanese Introduction to Oracle JET
Geertjan Wielenga
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Hiroshi Hayakawa
Nashorn in the future (English)
Nashorn in the future (English)
Logico
Our wish to Flowtype
Our wish to Flowtype
Teppei Sato
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Viewers also liked
(20)
Flowtype Introduction
Flowtype Introduction
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React を導入したフロントエンド開発
React を導入したフロントエンド開発
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS
Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS
React meetup 3_eight
React meetup 3_eight
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
Reactive Webアプリケーション - そしてSpring 5へ #jjug_ccc #ccc_ef3
Reactive Webアプリケーション - そしてSpring 5へ #jjug_ccc #ccc_ef3
今からでも遅くない! React事始め
今からでも遅くない! React事始め
Hastening React SSR - Web Performance San Diego
Hastening React SSR - Web Performance San Diego
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」
Japanese Introduction to Oracle JET
Japanese Introduction to Oracle JET
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Nashorn in the future (English)
Nashorn in the future (English)
Our wish to Flowtype
Our wish to Flowtype
20160927 reactmeetup
20160927 reactmeetup
Similar to Java + React.jsでSever Side Rendering #reactjs_meetup
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Toshiaki Maki
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
Spring.project
Spring.project
広平 田村
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
Kohei Saito
Javaと小道具
Javaと小道具
Sho Ito
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
2015/11/15 Javaでwebアプリケーション入門
2015/11/15 Javaでwebアプリケーション入門
Asami Abe
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
SmartNews, Inc.
とりあえず使えるSBT
とりあえず使えるSBT
Kiyotaka Kunihira
Ruby on Railsではじめるrspecテスト
Ruby on Railsではじめるrspecテスト
Kanako Kobayashi
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
JavaエンタープライズアーキテクチャにおけるHTML5 - Enterprise ☓ HTML5 Web Application Conference ...
JavaエンタープライズアーキテクチャにおけるHTML5 - Enterprise ☓ HTML5 Web Application Conference ...
Yusuke Suzuki
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
Yuto Suzuki
実戦Scala
実戦Scala
Yuto Suzuki
Javaアプリケーション開発におけるユニットテストとTDDの実践 Java Day Tokyo 2014
Javaアプリケーション開発におけるユニットテストとTDDの実践 Java Day Tokyo 2014
Shuji Watanabe
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf
Toshiki Iga
『健全なフロントエンド開発をしよう 〜Railsに乗っかるという選択編〜』 アップ用
『健全なフロントエンド開発をしよう 〜Railsに乗っかるという選択編〜』 アップ用
kotaro_hirayama
Similar to Java + React.jsでSever Side Rendering #reactjs_meetup
(20)
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Spring.project
Spring.project
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
RESTful API (JAX-RS) 書くだけで仕様書も自動で作られていく話 with MicroProfile Open API
Javaと小道具
Javaと小道具
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
2015/11/15 Javaでwebアプリケーション入門
2015/11/15 Javaでwebアプリケーション入門
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
SpringOne Platform 2016 報告会「A Lite Rx API for the JVM」/ 井口 貝 @ SmartNews, Inc.
とりあえず使えるSBT
とりあえず使えるSBT
Ruby on Railsではじめるrspecテスト
Ruby on Railsではじめるrspecテスト
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
JavaエンタープライズアーキテクチャにおけるHTML5 - Enterprise ☓ HTML5 Web Application Conference ...
JavaエンタープライズアーキテクチャにおけるHTML5 - Enterprise ☓ HTML5 Web Application Conference ...
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
実戦Scala
実戦Scala
Javaアプリケーション開発におけるユニットテストとTDDの実践 Java Day Tokyo 2014
Javaアプリケーション開発におけるユニットテストとTDDの実践 Java Day Tokyo 2014
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf
『健全なフロントエンド開発をしよう 〜Railsに乗っかるという選択編〜』 アップ用
『健全なフロントエンド開発をしよう 〜Railsに乗っかるという選択編〜』 アップ用
More from Toshiaki Maki
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
Toshiaki Maki
Concourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyo
Toshiaki Maki
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Toshiaki Maki
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
Toshiaki Maki
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Toshiaki Maki
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & Micrometer
Toshiaki Maki
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Toshiaki Maki
Spring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsug
Toshiaki Maki
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
Toshiaki Maki
BOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyo
Toshiaki Maki
Why PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring Boot
Toshiaki Maki
Zipkin Components #zipkin_jp
Zipkin Components #zipkin_jp
Toshiaki Maki
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
Toshiaki Maki
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Toshiaki Maki
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
Toshiaki Maki
Spring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjug
Toshiaki Maki
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Toshiaki Maki
Managing your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CI
Toshiaki Maki
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Toshiaki Maki
Short Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyo
Toshiaki Maki
More from Toshiaki Maki
(20)
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
Concourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyo
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & Micrometer
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Spring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsug
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
BOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyo
Why PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring Boot
Zipkin Components #zipkin_jp
Zipkin Components #zipkin_jp
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
Spring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjug
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Managing your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CI
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Short Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyo
Recently uploaded
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Recently uploaded
(9)
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Java + React.jsでSever Side Rendering #reactjs_meetup
1.
Java + React.jsで Sever
Side Rendering 2015-04-24 React.js meetup #1 LT Toshiaki Maki (@making)
2.
自己紹介 • @making • Java界隈にいます •
Spring Framework好き
3.
自己紹介 • @making • Java界隈にいます •
Spring Framework好き 「はじめてのSpring Boot」 著者
4.
自己紹介 • @making • Java界隈にいます •
Spring Framework好き 「はじめてのSpring Boot」 著者 Spring IO 2015スピーカー
5.
私とServer Side Rendering •
SPAでブログ作った! http://blog.ik.am
6.
私とServer Side Rendering •
SPAでブログ作った! Backend API (Java) Frontend SPA (Backbone.js) Backend SPA (Backbone.js) REST API REST API http://blog.ik.am https://github.com/making/categolj2-backend
7.
_人人人人人人人_ > ググれない <  ̄Y^Y^Y^Y^Y^Y ̄
8.
_人人人人人人人_ > ググれない <  ̄Y^Y^Y^Y^Y^Y ̄ アフィリエイト収入が 1/4に😭
9.
はてブ
10.
はてブ _人人人人人人人_ > Loading... <  ̄Y^Y^Y^Y^Y^Y ̄
11.
Sever Side Rendering やるしかない!
12.
SSR候補 •Prerender •Rendr (Backbone.js) •React.js
13.
SSR候補 •Prerender •Rendr (Backbone.js) •React.js 採用理由: 流行っているから
14.
React.jsで SSR?
15.
React.jsで SSR? それJavaでもできるよ
16.
JavaScript Engine in
Java • ScriptEngine API (JSR-223) • Java SE 6, 7 … Rhino • Java SE 8 … Nashorn
17.
JavaScript Engine in
Java • ScriptEngine API (JSR-223) • Java SE 6, 7 … Rhino • Java SE 8 … Nashorn JavaとJavaScriptの関係は インドとインドネシア の関係ほど単純じゃない
18.
ScriptEngine ScriptEngineManager engineManager =
new ScriptEngineManager(); ScriptEngine engine = engineManager.getEngineByName("js"); engine .eval("function sum(a,b){return a + b;}"); System.out.println(engine.eval("sum(1,2);")); // 3 http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html
19.
ScriptEngineを使って Sever Side Rendering V8バインディング いらず!
20.
React.js側のコード window.renderOnClient = function
(initialData) { React.render( <App data={initialData} />, document.getElementById('content') ); }; window.renderOnServer = function (initialData) { //initialData = Java.from(initialData); Listの場合 return React.renderToString( <App data={initialData} /> ); };
21.
React.js側のコード var App =
React.createClass({ render: function () { return ( <div> <h1>React.js</h1> <Greet data={this.props.data} /> </div> ); } }); サーバーサイドで用意さ れたデータが渡される
22.
React.js側のコード var Greet =
React.createClass({ getInitialState: function () { return this.props.data || {id: 0, content: 'Now Loading...'}; }, // … }); getInitialState()でサーバー で用意したデータを返す
23.
サーバーサイド// JSONマッパー ObjectMapper objectMapper
= new ObjectMapper(); // ScriptEngineのラッパー ScriptEngine engine = new JavaScriptEngine() .polyfill() .load("static/bundle.js") .get(); @RequestMapping("/") String index(Model model) throws Exception { Greet initialData = new Greet(100, "Data on Server"); Object markup = ((Invocable) engine) .invokeFunction("renderOnServer", initialData); model.addAttribute("markup", markup); model.addAttribute("initialData", objectMapper.writeValueAsString(initialData)); return "index"; }
24.
HTMLテンプレート (Thymeleaf) <body> <div id="content"
th:utext="${markup}"></div> <script src="bundle.js"></script> <script type="text/javascript" th:inline="javascript"> document.addEventListener("DOMContentLoaded", function () { var initialData = JSON.parse(/*[[${initialData}]]*/ '{"id": -1, "content": "モックデータ"}'); renderOnClient(initialData); }, false); </script> </body> エンジン経由だとコメントの中身が評価される テンプレートを直で開くとコメントの後ろが評価さ れるので、フロントエンドに閉じて開発可能! サーバーで生成した HTMLを埋め込む
25.
componentDidMount (Ajax) SSRできた! JSも評価されてる
26.
ということで フロントをReact.jsで作り直した Backend API (Java) Frontend SPA (React.js) Backend SPA (Backbone.js) REST API REST API https://github.com/making/categolj2-backend/tree/master/frontend-ui-reactjs
27.
ぐぐれ・・・・
28.
ぐぐれとるやん
29.
ん?
30.
ん? ブログのフロントエンドは React.jsで書いてみたけど SSR対応はまだだった!!
31.
ん? ブログのフロントエンドは React.jsで書いてみたけど SSR対応はまだだった!! Google先生が優秀だった
32.
まとめ • NashornがあればJavaでも サーバーサイドレンダリングで きた • Google先生はSPAに対応して いた
今日のソースコード https://github.com/making/ssr-demo
Download now