mottox2 blog

Next.jsのStatic Generationを追う際に参考にしたページ

dev

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。

2019 in Review

  • Guillermo Rauch(@rauchg) ... Vercel社(元ZEIT)のCEO のブログ記事
  • 2019年はJamstackが伸びた年であること
  • Staticは高速で安定性が高い
  • SSGやClient JS/APIでdynamicを実現できること
  • Next.jsはJamstackの機能を網羅している
    • Static GenerationとかAPI RoutesとかDynamic Routing
  • Vercelを使えば便利だよと等々

Static Generation / SSG Improvements

  • ページ単位でSSG(静的生成)とSSRを出し分けられるようにする。
  • Next.js 9になってデータを必要としないページはhtmlとして出力されていた。(いわゆるAutomatic Static Optimization)
  • データを必要とする場合は既存のexportを使うことでStaticにできたが、すべてのページが静的になってSSRが使えない。
  • また、getInitialPropsではクライアントでの遷移時にデータを取得する必要がありDBやCMSへのアクセスが発生していた。
  • これらを解決するためにgetStaticProps、getStaticPropsを導入し、静的なデータを扱えるようにした。
  • (サーバーサイドで実行されるgetServerSidePropsも追加された)

RFC: Incremental Static Regeneration

  • 上記のStatic Generationが実装され、高速に低コストでウェブサイトを配信できるようになった。
  • 欠点として、静的に生成されたページのデータ更新された場合、完全な再ビルドが必要だった。
  • このリビルドを避けて、オンデマンドで新しいページを生成するのがIncremental Static Regeneration
  • 各ページにtimeoutを設定し、有効期限が切れると再レンダリングが走る。
  • Staticにツイートを表示するデモ https://static-tweet.now.sh/

Static Hoisting

  • Vercel社(元ZEIT) Guillermo Rauch氏のブログ記事
  • Hoisting(変数の巻き上げ)の説明し、Jamstackは計算結果を訪問者に巻き上げるものだと言っている。
  • CDNとJamstackの比較。JamstackはすべてのEdge Serverで共有される。
  • Next.jsはページ単位にアセットを生成するので静的な部分を巻き上げやすい構成になっている。
    • Dashboardのような一見動的な画面もClient JSでやるからデータの問い合わせをする静的ページ。
B!
dev

リモート勤務なITエンジニアが分報で気をつけること

2020年になり誰もが予想しなかった速度で、人々の営みはオンライン上で行われるようになりました。もちろん仕事も例外ではありません。 そういった変化の中ではオンライン上のコミュニケーションがより重要

poen

うちでやりたい○つのこと

新型コロナウイルスの影響で外出が推奨されなくなって数週間がたった。 「自分は普段から引きこもりがちだ。大して影響はないだろう。」と構えていたが、日に日に後ろ向きの感情が強くなっているように感じている

うちにいよう
dev

microCMSを使ってGatsbyブログに連載機能を実装した

本ブログはGatsbyを使って、esa.ioで書いたコンテンツをNetlifyで配信しています。 esa.ioは情報共有サービスとして作られているので非常に書きやすいサービスです。しかし、(意図しな

blog
Copyright © 2019 @mottox2 All Rights Reserved.