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
790
サーバサイドだけでReact使う / React as Template Engine
React勉強会@福岡 vol.2での発表資料
久保田光則
June 05, 2019
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.8k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.9k
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
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Side Projects
sachag
455
42k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Language of Interfaces
destraynor
158
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How GitHub (no longer) Works
holman
314
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Facilitating Awesome Meetings
lara
54
6.4k
Site-Speed That Sticks
csswizardry
10
680
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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ΛαʔόαΠυ͚ͩͰ͏ ී௨ͷςϯϓϨʔτΤϯδϯΑΓ ศར
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠