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
サーバサイドだけでReact使う / React as Template Engine
Search
久保田光則
June 05, 2019
1
810
サーバサイドだけでReact使う / React as Template Engine
React勉強会@福岡 vol.2での発表資料
久保田光則
June 05, 2019
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
10k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.8k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.2k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Scaling GitHub
holman
463
140k
Fireside Chat
paigeccino
40
3.7k
Music & Morning Musume
bryan
46
6.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Cult of Friendly URLs
andyhume
79
6.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
αʔόαΠυ͚ͩͰReact͏ 3FMBZ)VC --$ٱอాޫଇ!BOBUPP
ٱอాޫଇ 3FMBZ)VC --$ !BOBUPP HJUIVCDPNBOBUPP ࣗݾհ
ධൃചதʂ
ࠓճͷ αʔόαΠυ͚ͩͰ3FBDU͏
͍ΘΏΔ443 αʔόαΠυͱΫϥΠΞϯτͰ ίʔυΛڞ༗ αʔόͰ༧Ί)5.-Λੜ 4&0 ύϑΥʔϚϯεͷͨΊ
αʔόαΠυͷΈͰ͏߹ ΫϥΠΞϯτͱڞ༗͠ͳ͍ OPEFͷαʔόαΠυΞϓϦέʔ γϣϯ͔ΒͷΈར༻ ϝϦοτ͕े͋Δ
// ୯ʹnodeͰಈ͔͢߹ const React = require('react'); const {renderToStaticMarkup} = require('react-dom/server');
function HelloWorld() { return <div>Hello World!!!!</div>; } console.log(renderToStaticMarkup(<HelloWorld />));
// expressͱΈ߹Θͤͯ͏߹ const express = require('express'); const React = require('react');
const {renderToStaticMarkup} = require('react-dom/server'); function HelloWorld() { return <div>Hello World!!!!</div>; } const app = express(); app.get('/', (req, res) => { res.send(renderToStaticMarkup(<HelloWorld />)); }); app.listen(3000);
React as Template Engine
ͳͥ ී௨ͷςϯϓϨʔτΤϯδϯΑΓศར ϦϯτܕνΣοΫ͕ޮ͘ Ϗϡʔͷڞ௨Խ͕؆୯ ςετ༻ͷϥΠϒϥϦ͕ॆ࣮
ΤσΟλɾ*%&ͷࢧԉड͚ΒΕΔ
·ͱΊ 3FBDUΛαʔόαΠυ͚ͩͰ͏ ී௨ͷςϯϓϨʔτΤϯδϯΑΓ ศར
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠