App Router
fileやdirの命名によって特殊な意味を持つものが多くて難しいmrsekut.icon
概念多すぎて、機能一覧と3行コメント、みたいなのを作っておかないと把握できないmrsekut.icon
積極的にprefetchされる
誰も言及していないので言うと流行りのApp Routerを使うなら bind を使うと良いですよ
構造的に絶対indexが必要になるのだるいな
別に問題ないが
URLとして存在pathが出てくる
従来との差異ポイント
pages/との併用はできる
だから徐々に移行することはできる
ただ、最終的には全てをapp/に移行することになりそう
以下のようなファイルも不要になる
_app.tsx
_document.tsx
なんかキモいなmrsekut.icon
getServerSideProps、getStaticProps、getInitialPropsなどはサポートしてない
「App Router」って単語はどこからどこまでを指してるの？
npm run devでは動いているのに、buildしたらerrorになるやつ多すぎる
clientかどうかの扱いが謎すぎる
use client書かずにhooks使ってもbuildはうまくいく。なぜ？
runtime errorも起きない
npm run devでは怒られる
こっちは正しいと思うmrsekut.icon
見てるところが違うのか。非常にやりづらい
挙動がズレてる
app外で書いたcomponentのserver/clientの扱い
全部client componentsになっている感じがする
いやそんなことないのか(?)
どこでprisma書けば良い年
いちいちエンドポイント用意するの面倒すぎる
getStaticProps的な
特に、clientから呼び出す系のやつ
server components
defaultでこれになる
クライアントに送信されるデータ量を減らして高速化
app/内は全てdefaultでserver componentになる
client components
server module
client module
docs
Fundamentals
Fetching
Caching
Revalidating
Mutating
Streaming and Suspense
Generating Static Params
API Routes
Data Fetching
距離的に近い
access tokenやAPI keyなどの機密情報をclientに持ってくる必要がない
server上で、fetchとrenderingを完結できる
clientでreqを送ると複数回送られるからってことか(?)
reqの単位が変わるわけではないが、見た目上1回で終えられるってこと？
なんじゃそりゃmrsekut.icon
clientでfetchする場合はreact-queryなどを使うことを推奨している
ただ、useは将来的にはclientでも使えるようになる 親layoutから、子layoutにデータを渡すことは出来ない
個別にfetch処理を書けば良い
2種類のfetching
まあ別にJS知っっている人なら普通mrsekut.icon
parallel data fetching
データの読み込みにかかる合計時間が短縮される
できるだけこちらを使う
普通にpromise.allしてるだけ
code:ts
export default async function Page({ params: { username } }) {
const artistData = getArtist(username); // ここではawaitしない。Promiseを受け取る
const albumsData = getArtistAlbums(username);
// Wait for the promises to resolve
all()内の全てのpromiseが解決されてからrenderingされる
sequential data fetching
あるreqに必要なデータが、他のreqに依存している場合など
watarfallができてしまう
CDN上にcacheする
server rendering中に、使えるcacheがあるならそれを使う
cacheが2種類ある
Segment-level Caching
各segmentごとにcache revalidateの時間を指定できる
すげえなmrsekut.icon
code:ts
export const revalidate = 60; // revalidate this page every 60 seconds
code:ts
const res = await fetch('https://...', { next: { revalidate: 10 } }); ↑以上の3つの値の中で最も小さい数字が採用されるらしい
むじいなmrsekut.icon
Per-request caching
requestごとのcache
これ、app/と関係なくない？
app/の中でしか使えないってこと？
Streaming
ページ全体のロードを待たずにユーザーは操作可能
ページ内のパーツごとに、ロードを終わらせる
ボディよりサイドバーの方が先にロードが終わったら、サイドバーだけ先に表示する
Suspense for Data Fetching:
移行方法
Remixの方をほぼ知らないが
layout.tsxもできる
基本page.tsxの中で呼ぶ？
用語
https://gyazo.com/b906918e91a0ec847ed01038bb4f7ee6 https://beta.nextjs.org/docs/routing/fundamentals
https://gyazo.com/4f9c3f6ef86b32d8aa4aa1c6edee3c42
アプリケーション全体のstyleとかをここに置く？
ルート（routes）に対してアプリケーションのコードを、まるでコンポーネントやスタイルやテストのように簡単に設置できるようにしました。チームが（ルートに対して処理を付加する際の）独自の規約や構成を考えなくても済みます。 ref いままでpagesには基本にはpageファイルだけで、アプリで共通の設定が_documentや_appなどでしたが、それが各ページ毎におけるようになったイメージです。ref ほんまに？
appでネストした単位がsuspenseする単位になるってこと？