こんにちは！りょた(@Ryo54388667)といいます(^o^)
4/15日(土)にNext.jsの勉強会に参加してきたので、備忘録として書きました。
概要
- 13.2あたりでアナウンス無しで命名変更された。旧AppDir extension。
- appディレクトリ配下の新しいインターフェース。
- appディレクトリ配下のディレクトリを「セグメント」と呼ぶ。セグメントにつき、特別な命名のファイルを作成すると自動的に構造が決定される。
- page.tsx…従来のpages配下のファイルの責務。
- error.tsx…エラーバウンダリーの責務。
- loading.tsx…suspenseのローディングの責務(suspenseのfallbackに渡される)。
- layout.tsx…レイアウトの責務。
Server Components
- サーバーサイドで処理されるコンポーネント。
- トップレベルでasync/await を利用できる(Promiseを解決できる)
export const FogeComp = async () => { const data = await fetch(…) return (…) }//の記述が可能。- appディレクトリ配下ではコンポーネントを作成するとデフォルトでserver componentになる。
- client コンポーネントにする場合はtsxファイルのトップに「
use client」の記述が必要。 - どんな処理をServer componentsで行い、Client Componentsで行うのか、という問いはこのページに記載されている。
- 留意点
- stateを保持できない。
- シリアライズ可能なものしか、propsで渡すことができない。
- 関数はpropsで渡せない。
- CSS in JSは利用不可(ただしvanila-extractはNextjs13対応のためのPJが立ち上がっている)。現在、TailwindとCSS modulesのみ利用可能。
Cacheについて
- SSR, SG, ISRのようなページタイプは、Nextjsによって拡張されたfetchメソッドのcacheの値でコントロールされるようになった。
- 従来のgetServerSidePropsメソッド ==>
fetch(“”, { cache: 'no-store' }) - 従来のgetStaticSidePropsメソッド ==>
fetch(“”, { cache: 'force-cache' })(<—これがデフォルト) - 従来のISR ==>
fetch(https://..., { next: { revalidate: 60 } } })
- 従来のgetServerSidePropsメソッド ==>
- revalidateプロパティの値のことを「revalidation frequency」という。
- セグメントレベルでキャッシュすることも可能。//page.tsx ファイルのトップに
export const revalidate = 60の記述でセグメント単位でrevalidate可能。ただし、セグメント単位でexport const revalidate = 60を設定し、配下のファイルでfetch(“”, { cache: ‘no-store’ })またはfetch(“”, {next: ({revalidate: 0 }})とすると、revalidation frequencyが最も小さいものが適用される。この場合、revalidate: 0が適用される(SSRのセグメントになってしまう)。 - コンポーネント単位のレンダリングタイプの指定はできない。セグメント単位のレンダリングタイプになっている。
Streaming SSR
- SSRのメリットはサーバー側でフェッチできるが、デメリットとしてHTMLの生成が全て終了する必要があるので、その結果FCPが悪くなる。
- 一部ずつレスポンスしていく技術。
- layout.tsxのみ素早く返却し、処理の重いコンポーネントは順次返していく、という設計が可能になる。
- デベロッパーツールのResponse Headerに「Transfer-Encoding: chunked」が指定されている。詳しくはこちら。
- react18のselective HTMLに対応。詳しくはこちら。
- つい先日、AWS Lambdaも対応した。詳しくはこちら。
まだまだわからないことだらけです。。勉強せねば！！！
最後まで読んでいただき、ありがとうございます！