https://javascript-fes.doorkeeper.jp/events/90894 #jsfes
[2019-06-03更新] 発表版のPDFに差し替え。事例部分は詰めが甘かったため削除。内容をブラッシュアップしてどっかのLTで喋りたいと思います
SSRを検討する際にSSGも検討しませんか？2019.06.01 初夏のJavaScript祭 / @mottox2
View Slide
スライドはSpeakerDeckにアップします。忘れてなければTwitterにツイートしています。@mottox2 or #jsfes をチェック！
フロントエンドエンジニア（Web/iOS）Gatsby, Gridsome maintainerエンジニアの登壇を応援する会write-blog-every-weekお仕事OSSmottox2@ؿٔ٦ٓٝأ8FCؒٝآص،⾃⼰紹介コミュニティhttps://mottox2.com
OSS活動SPA系のサイトジェネレーターをやっています
技術書典への参加
#jsfes今⽇登場するフレームワークNuxt.jsNext.jsGridsomeGatsby国内で⼈気の⾼いVueアプリケーションのためのフレームワーク。ユニバーサルなSSRや、静的ファイルの⽣成に対応。Reactアプリケーションのためのフレームワーク。ユニバーサルなSSRや、静的ファイルの⽣成に対応。Vue製のモダンなサイトジェネレーター。早くて堅牢でSEOに強いサイトが作れる。React製のモダンなサイトジェネレーター。早くて堅牢でSEOに強いサイトが作れる。海外で⼈気。
#jsfesJavaScript好きですか？
#jsfesSPA好きですか？
#jsfes（私は）SPA⼤好き• Scope付きのCSS• コンポーネント志向なViewの組み⽴て• DOMのdiff操作からの開放• サーバーサイドと密結合になりにくい• TypeScriptとの親和性が⾼い• 開発環境を⽴てやすい
#jsfesでも、リリースで迷うことが多くない？
#jsfesSPAのリリースでつきまとう課題• レンダリングされるまで空⽩なので相対的に遅く感じる• モバイル端末ではレンダリングが遅くなりがち• OGPを動的に変更できない。• titleタグ、metaタグ周りの話。• SEO上不利• Google I/O 2019の発表されたクローラーの改善で解消されそう？
#jsfesSPAのリリースでつきまとう課題• JSが実⾏されるまで空⽩なページが表⽰される。読み込み直後 マウント後JS読み込み&実⾏
#jsfesSPAのリリースでつきまとう課題• vue-cliで作成したプロジェクトのビルド結果読み込むまで画⾯は真っ⽩metaタグを⼀通りしか設定できない
#jsfes今までのレガシーなWebアプリケーションでは当たり前だったことが、単独では達成できない⼀⾔で⾔うと？
#jsfesそこで選択肢に上がるのがSSR(Server Side Redering)
#jsfesSSR（Server Side Rendering）• この発表ではSSRをクライアントでもSPAとして動作するものとします。• サーバー上でレンダリングを⾏い、結果をHTMLとして返す。配信サーバー クライアントNode.jsレンダリング
#jsfesSSRの最⼩コード• Nuxt.jsやGridsomeでも使われているvue-server-rendererの最⼩コード• ClientでSPAとして動作しない。• 『Vue SSRガイド』• https://ssr.vuejs.org/ja/• 実⾏結果『Vue SSRガイド』より
#jsfesユニバーサルなSPA• Nuxt.js/Next.jsはユニバーサル（サーバーでもクライアントでも動作する）なSPAになるように整備してくれている。サーバーサイドで⽣成したHTML クライアントでマウントしてSPAとして動作JS読み込み&実⾏ユーザーの操作を受け付け始める単純なHTMLとして振る舞う
#jsfes• Next.jsの抜粋です。• zeit/next.jsユニバーサルなSPAのサンプル
#jsfesSSR、銀の弾丸ではない• サーバーが必要になる• 考えることが増える• CPU負荷が⼤きく⼤量の処理をさばけない• 回避するためにキャッシュをうまく利⽤する• サーバーとクライアントでの処理の出し分けが必須• ある程度の知識が必要
#jsfes[optional] キャッシュの話• ⼀度レンダリングした結果を使い回すため、CDN等のキャッシュを利⽤して配信する。• この際に、ユーザー情報を含めると他のユーザーの情報が⾒えてしまうことがあるので、サーバーサイドではユーザー情報を扱わない。• クライアントで認証＋認証を伴うAPIを叩く。• キャッシュの削除タイミングを考える必要がある。
#jsfesもう⼀つの選択肢SSG（Static Site Generator）でPrerendering
#jsfesPrerendering• 「事前にSSRを⾏って静的ファイル化しておけば、本番では配信するだけでOK」というアプローチ。• これらのアプローチを⾏っているのがGatsby/Gridsome、Next.js/Nuxt.jsのPrerendering。• これらもユニバーサルなSPAとして振る舞う。• Prerenderingでもサーバーとクライアントでの処理の出し分けの理解は必要。• Build-time server-side rendering（Gridsome公式サイトより）
#jsfesPrerendering• 事前にファイルを⽣成• ⽣成例: mottox2/website
#jsfesPrerenderingとSSR• 事前に結果を⽣成しておくか、アクセスごとに処理を⾏うかの違い• ⼀旦、SSRのキャッシュは忘れて1. アクセスを受けて、HTMLを⽣成・配信2. クライアントはHTMLを受け取って表⽰3. JSがマウントされSPAとして動作Prerendering SSR1. 事前に⽣成したHTMLを配信2. クライアントはHTMLを受け取って表⽰3. JSがマウントされSPAとして動作
#jsfes• 『Rendering on the Web』が詳しい• https://developers.google.com/web/updates/2019/02/rendering-on-the-webPrerenderingとSSR
#jsfesPrerenderingの利点• 考えることが減る。• サーバー不要。• キャッシュの削除を考えなくてもよい。• コストが低い。
#jsfesPrerenderingの⽋点• コンテンツが更新される度にビルドする必要がある。• 事前にすべてのページに対してHTMLを⽣成する必要がある。• ページ数が多くなればなるほどビルド時間が伸びる。• 更新頻度が⾼いとCDNキャッシュの恩恵を受けにくい。• 他⾔語の静的サイトジェネレーターと⽐べて遅い。• ユニバーサルなSPAとして動作するコードを出⼒するため。
#jsfesPrerenderingの⽋点Version 1 Version 2Build & Deployコンテンツの更新通知(webhook)過去 未来⇐ コンテンツの反映までのタイムラグコンテンツの量/ページの量に依存する• コンテンツ更新までの時間軸（反映までに時間がかかる）
#jsfes結局どっちを選べばいいの？
#jsfesどっちを選べばいいの？• コンテンツの更新を瞬時に反映する必要がある。• コンテンツが頻繁に更新される• コンテンツ量が多い• SSRに対しての理解度が⾼い• 札束で殴る⽤意がある• 多少遅くても許容できる• コンテンツの反映に時間があっても許容できる。• コンテンツが更新される頻度が低い。• コンテンツが数百程度• 考えることを減らしたい• ホスティング料⾦を減らしたい• パフォーマンスにこだわりたいServer Side Renderingを選ぶとよいケース Prerenderingを選ぶとよいケース=> コンテンツの性質によって決める。許容できるのであればSSGが楽。
#jsfesどっちかに振り切る必要はない• Prerendering→SSRへの移⾏について• Next.jsやNuxt.jsのようなSSRフレームワークでは、Prerenderingも機能として提供されている。• リリース時はPrerendering、サービスが成⻑したらServer SideRenderingという⼿も• Gatsby => Next.js、Gridsome => Nuxt.jsの移⾏もあり。• 個⼈的にはおすすめ• ルーティングのルールなど共通部分はあるので⼯数は重くない。
#jsfesどっちかに振り切る必要はない• Prerenderingでもアプリケーションになりうる• サイトジェネレーターというとブログやコーポレートサイトを連想させるが、GatsbyやGridsomeはアプリケーションフレームワーク。• 例) Gatsbyで出来たECサイト https://store.gatsbyjs.org/
#jsfesどっちかに振り切る必要はない• すべてのページにPrerenderingを適⽤する必要はない• クライアントのみでレンダリングする箇所の検討も• これだけでも早く感じるJS読み込み&実⾏サーバーでは共通部分だけ表⽰クライアントでAPIを叩いて表⽰
#jsfesどっちかに振り切る必要はない• どちらとも利⽤しない選択肢• 基本的にはB向けのSaaSで、⼀部だけシェア画⾯が必要• どちらとも利⽤せず、ClientSideだけでレンダリング• シェア⽤画⾯だけ別に⽣成する⽅法などが考えられる。• SPA技術で作る必要はない。
#jsfesまとめ• SSRは考えることが多いのでPrerenderingで要件が達成できるのであればおすすめ。• 「真っ先にSSR！」じゃなくてPrerenderingも考えてみてください。ショートカットできる箇所も多い。
#jsfesThank you!2019.06.01 初夏のJavaScript祭 / @mottox2
mottox2
tatsuru
culvert
mashiike
lemon
ewolff
mploed
opelab
linedevth
yamahiro
k_koheyi
autifyhq
coe
bluesmoon
chriscoyier
zenorocha
destraynor
morganepeng
philhawksworth
tanoku
philnash
ufuk
malarkey
iamctodd