僕が求めていたのはNext.jsだったんだ

Next.jsは素晴らしいという話。React LT会 @Informetis (2019-04-24) で発表。

Transcript

1. @mqtsuo02 2019-04-24 React LT会 僕が求めていたのは Next.js だったんだ
2. 自己紹介 + 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もやってます
3. ユーザ投稿型のメディアを作りたくなった。 （仕組みとしてはnote.muみたいなもの） 最近のはなし
4. Firebase HostingにReactのSPAおけばいいかな... と思いつつも 将来のことが色々不安になってきた。 最近のはなし
5. SEO的なものは大丈夫なんだろうか？ GoogleはSPAでもクロールするって言ってるけど OGPとかは大丈夫なんだろうか？ react-helmetで実装してるけど、読んでくれるのかな？ 将来の不安　その１
6. First Viewのパフォーマンス大丈夫かな？ メディアだから待たせたくない！ PHPとかRubyのSSRに負けてしまうんじゃないだろうか 負けたくねぇよぉ... 将来の不安　その２
7. Laravel 勉強したほうがいいんじゃね？ GAE/Golangでサーバ立ててテンプレートでなんとかする？ 最近JAMStack流行ってきてるのかな？ SPAに限界感じる。もう何もかも嫌だ。 結果、開発放置気味に... 不安が生んだ迷いと現実逃避
8. ３ヶ月後
9. Next.jsの母 (ZEIT) 来日
10. 最新のNext.jsはAMPにも対応できる Serverless pre renderingでめちゃ速い 差分だけビルドできる 湧き上がる会場 Next.jsそんなにええんか！？ ZEITのLT
11. First ViewはSSRで、その後はSPAで ユニバーサルなJavaScript モジュールを分割して段階的に読み込める とにかく速さを売りにしていることがワカッタ！ Next.js 再入門してみた
12. 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でデータ取得
13. SPAとSSR組み合わせるの辛いって誰か言ってた ReactでSSRするのって本質的じゃなくない？ 投資対効果低そう.... Before
14. Next.js 最高！！！ ZEIT 神！！ 一生ついていきます！！ After
15. 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、オートスケーリング、たぶん完璧！！
16. ReactやってるならNext.jsもやった方がいい 公式ページみると感動するよ Next.js 最高！！！　ZEIT 神！！！ あと、Reactのお仕事ください！ このLTで伝えたかったこと
17. E N D