【YWT】210304

1. [Y] やったこと

  • 4.5m歩いた
  • 朝から出社した
  • Next.jsのチュートリアルをすすめた
  • 画面上に説明を載せるときのケースによるコンフリクトやそもそもの前提の違いについて話をした
  • Wifiとかウェブカメラを使った測定方法について話をした
  • 機械学習とか仕様の話とかをした
    • そもそも機械学習をさせる必要があるかどうか
    • 機械学習以外の方法はないのか
    • やりたいことよりも前にやることはないか
    • 既存の仕様で他のアプリではなかなか見れない仕様に関しての話
  • 気づいたら3食ハンバーガー食べてた

2. [W] わかったこと

  • 今月の目標でやりたかった実装の名称がわかった
    • 「ファイルシステムを使った外部データをとってくる」だった
  • Next.jsの事前レンダリングの概要についてのチュートリアルをすすめた
    • 事前レンダリングの説明
    • Next.jsではすべてのページのHTMLを事前に生成して、パフォーマンスとSEOの向上をはかっている
    • 生成されたHTMLは、そのページに必要な最低限のJavaScriptコードに関連付けられる
    • ブラウザがページを読み込み、JavaScriptのコードを実行すると、ページがインタラクティブになる
      • hydration という用語をはじめて知った
    • 普通のReactアプリだと事前レンダリングがないため、JavaScriptを無効にすれば、アプリの表示ができなくなる
    • Next.jsの場合は、静的HTMLを事前レンダリングしているため、JavaScriptを実行しなくてもアプリのUIが表示できる
  • Next.jsの事前レンダリングの種類についてチュートリアルをすすめた
    • 2種類の事前レンダリングについての説明
    • 事前レンダリングには静的生成(Static Generation)、サーバーサイドレンダリング(Server-side Rendering)の2種類がある
      • 静的生成はビルド時にHTMLを生成することで、リクエストのたび同じものを再利用する
      • サーバーサイドレンダリングはリクエストごとにHTMLを生成するので、場合によっては違うものがレスポンスされる
    • 可能な限り、静的生成を使うことが推奨されている
      • マーケティングページ、ブログ、Eコマース製品リスト、ヘルプとドキュメントなどなど
    • 「ユーザーのリクエストに先立ってそのページを事前にレンダリングしておけるのか」を基準にする
      • しておけるのであれば、静的生成
      • できないのであれば、サーバーサイドレンダリング
      • サーバーサイドレンダリングは更新されるデータを常に最新の状態にすることができる

  • Next.jsのデータがある場合の静的生成についてチュートリアルをすすめた

    • データがあるときの静的生成についての説明
    • ビルド時に外部データをとってきて、HTMLを生成する必要がある
      • ファイルシステム、外部API、データベースなどを使う

    • とってきたデータは非同期処理でgetStaticProps関数を使うことで、データのexportができる

      •   export const App(props) => {…}

  export async function getStaticProps() {
    const data = ...
    return {
      props: ...
    }
  }
    • getStaticPropsは、対象のページにデータ依存関係があるからビルド時に必ず依存関係を解決するようNext.jsに伝える役割をする
  • Next.jsのgetStaticPropsの詳細についてチュートリアルをすすめた
  • Next.jsのリクエスト時にデータを取得する方法についてチュートリアルをすすめた
    • データ取得のパターンについての説明
    • 事前レンダリングが必要で、リクエスト時にデータを取得が必要な場合は、サーバーサイドレンダリングをする
      • getServerSidePropsという関数を使って、画面表示用のコンポーネントにexportしておく必要がある
      • contextという引数でリクエスト時の固有のパラメーターを受け取る
    • データを事前レンダリングする必要がない場合は、静的生成+クライアント側でデータフェッチをする手もある
      • 外部データを必要としないページを静的生成する
      • ブラウザでページを読み込んだら、クライアントから外部データをとってきて、残りの部分にデータを埋める
      • ユーザーごとに固有のデータを表示させる必要がある場合とかSEOが関係なくデータが頻繁に更新されるページでデータ取得をする必要がある場合とかに使える
    • Next.jsでSWRを使えば、フェッチしたデータを管理するためのReact hooksが使える
      • キャッシュ、再バリデーション、フォーカストラッキング、インターバルでデータの再フェッチなどの処理ができる
  • どこかのタイミングでNext.jsのチュートリアルをすすめたときのメモメモまとめとしてブログを書いておきたいと思った

3. [T] 次にやること

results matching ""

    No results matching ""