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
僕が求めていたのはNext.jsだったんだ
Search
Matsuo Obu
April 24, 2019
Technology
0
560
僕が求めていたのはNext.jsだったんだ
Next.jsは素晴らしいという話。React LT会 @Informetis (2019-04-24) で発表。
Matsuo Obu
April 24, 2019
Tweet
Share
More Decks by Matsuo Obu
See All by Matsuo Obu
Reactの歴史
mqtsuo02
0
820
文学作品「檸檬」をReactで読む
mqtsuo02
1
410
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
470
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
640
ピピピのPWA
mqtsuo02
0
570
GraphQLについての5分間
mqtsuo02
0
680
Create React App 読解特急
mqtsuo02
0
63
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
61
Other Decks in Technology
See All in Technology
オブザーバビリティの Primary Signals
onk
PRO
0
550
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
240
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
現代CSSフレームワークの内部実装とその仕組み
poteboy
2
680
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
アプリがつくるNOT A HOTELブランド
hokuts
1
450
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
670
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
330
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
190
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
Featured
See All Featured
A designer walks into a library…
pauljervisheath
199
23k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Debugging Ruby Performance
tmm1
70
11k
A Philosophy of Restraint
colly
196
16k
Side Projects
sachag
451
41k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Done Done
chrislema
178
15k
Music & Morning Musume
bryan
41
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Transcript
@mqtsuo02 2019-04-24 React LT会 僕が求めていたのは Next.js だったんだ
自己紹介 + React歴 - フリーランスのWebエンジニア - 直近2年間はずっとReact関連 - ReactのSPA3本、ReactNative1本 -
色んな構成でやった - redux, redux-saga, ContextAPI - Flow, TypeScript - styled-components, CSS Modules, inline style - create-react-app, storybook, jest, enzyme - Vue.js (Nuxt.js)とかGolangもやってます
ユーザ投稿型のメディアを作りたくなった。 (仕組みとしてはnote.muみたいなもの) 最近のはなし
Firebase HostingにReactのSPAおけばいいかな... と思いつつも 将来のことが色々不安になってきた。 最近のはなし
SEO的なものは大丈夫なんだろうか? GoogleはSPAでもクロールするって言ってるけど OGPとかは大丈夫なんだろうか? react-helmetで実装してるけど、読んでくれるのかな? 将来の不安 その1
First Viewのパフォーマンス大丈夫かな? メディアだから待たせたくない! PHPとかRubyのSSRに負けてしまうんじゃないだろうか 負けたくねぇよぉ... 将来の不安 その2
Laravel 勉強したほうがいいんじゃね? GAE/Golangでサーバ立ててテンプレートでなんとかする? 最近JAMStack流行ってきてるのかな? SPAに限界感じる。もう何もかも嫌だ。 結果、開発放置気味に... 不安が生んだ迷いと現実逃避
3ヶ月後
Next.jsの母 (ZEIT) 来日
最新のNext.jsはAMPにも対応できる Serverless pre renderingでめちゃ速い 差分だけビルドできる 湧き上がる会場 Next.jsそんなにええんか!? ZEITのLT
First ViewはSSRで、その後はSPAで ユニバーサルなJavaScript モジュールを分割して段階的に読み込める とにかく速さを売りにしていることがワカッタ! Next.js 再入門してみた
Express + Next.js + React これがユニバーサルJavaScriptか!! めっちゃいいやん!! Next.js の SSR+SPAチュートリアルやってみた
server.js require(“express”); require(“next”); ... pages/index.js Index.getInitialProps = async () => { … return {key: value}; }; package.json “build”: “next build”, “start”: “node server.js”, ... next build して server.js実行する感じ nextを初期化して express書いていく感じ いつもの要領でJSX書く getInitialPropsでデータ取得
SPAとSSR組み合わせるの辛いって誰か言ってた ReactでSSRするのって本質的じゃなくない? 投資対効果低そう.... Before
Next.js 最高!!! ZEIT 神!! 一生ついていきます!! After
Front End (GAE) node10 Express + Next.jsで SSR + SPA
ぼくが考えた さいつよ の構成 ユーザ認証 (Firebase Auth) Back End (Cloud Functions or GAE) Golang or node DB (Cloud DataStore) Storage (Cloud Storage) SSR + SPA、オートスケーリング、たぶん完璧!!
ReactやってるならNext.jsもやった方がいい 公式ページみると感動するよ Next.js 最高!!! ZEIT 神!!! あと、Reactのお仕事ください! このLTで伝えたかったこと
E N D