Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SSRを検討する際にSSGも検討しませんか? / ssr or ssg

SSRを検討する際にSSGも検討しませんか? / ssr or ssg

https://javascript-fes.doorkeeper.jp/events/90894
#jsfes

[2019-06-03更新] 発表版のPDFに差し替え。事例部分は詰めが甘かったため削除。内容をブラッシュアップしてどっかのLTで喋りたいと思います

mottox2

June 01, 2019
Tweet

More Decks by mottox2

Other Decks in Technology

Transcript

  1. #jsfes 今⽇登場するフレームワーク Nuxt.js Next.js Gridsome Gatsby 国内で⼈気の⾼いVueアプリケーショ ンのためのフレームワーク。ユニバー サルなSSRや、静的ファイルの⽣成に 対応。

    Reactアプリケーションのためのフレー ムワーク。ユニバーサルなSSRや、静的 ファイルの⽣成に対応。 Vue製のモダンなサイトジェネレー ター。早くて堅牢でSEOに強いサイト が作れる。 React製のモダンなサイトジェネレー ター。早くて堅牢でSEOに強いサイト が作れる。海外で⼈気。
  2. #jsfes PrerenderingとSSR • 事前に結果を⽣成しておくか、アクセスごとに処理を⾏うかの違い • ⼀旦、SSRのキャッシュは忘れて 1. アクセスを受けて、HTMLを⽣成・配信 2. クライアントはHTMLを受け取って表⽰

    3. JSがマウントされSPAとして動作 Prerendering SSR 1. 事前に⽣成したHTMLを配信 2. クライアントはHTMLを受け取って表⽰ 3. JSがマウントされSPAとして動作
  3. #jsfes Prerenderingの⽋点 Version 1 Version 2 Build & Deploy コンテンツの更新

    通知(webhook) 過去 未来 ⇐ コンテンツの反映までのタイムラグ コンテンツの量/ページの量に依存する • コンテンツ更新までの時間軸(反映までに時間がかかる)
  4. #jsfes どっちを選べばいいの? • コンテンツの更新を瞬時に反映する必要が ある。 • コンテンツが頻繁に更新される • コンテンツ量が多い •

    SSRに対しての理解度が⾼い • 札束で殴る⽤意がある • 多少遅くても許容できる • コンテンツの反映に時間があっても許容で きる。 • コンテンツが更新される頻度が低い。 • コンテンツが数百程度 • 考えることを減らしたい • ホスティング料⾦を減らしたい • パフォーマンスにこだわりたい Server Side Renderingを選ぶとよいケース Prerenderingを選ぶとよいケース => コンテンツの性質によって決める。許容できるのであればSSGが楽。
  5. #jsfes どっちかに振り切る必要はない • Prerendering→SSRへの移⾏について • Next.jsやNuxt.jsのようなSSRフレームワークでは、Prerenderingも機能 として提供されている。 • リリース時はPrerendering、サービスが成⻑したらServer Side

    Renderingという⼿も • Gatsby => Next.js、Gridsome => Nuxt.jsの移⾏もあり。 • 個⼈的にはおすすめ • ルーティングのルールなど共通部分はあるので⼯数は重くない。