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
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
Embracing the Ebb and Flow
colly
88
4.9k
The Pragmatic Product Professional
lauravandoore
36
7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Why Our Code Smells
bkeepers
PRO
340
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Bash Introduction
62gerente
615
210k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
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ΛαʔόαΠυ͚ͩͰ͏ ී௨ͷςϯϓϨʔτΤϯδϯΑΓ ศར
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠