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
800
サーバサイドだけで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
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Agile that works and the tools we love
rasmusluckow
330
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing for Performance
lara
610
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Scaling GitHub
holman
463
140k
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ΛαʔόαΠυ͚ͩͰ͏ ී௨ͷςϯϓϨʔτΤϯδϯΑΓ ศར
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠