강의

N
챌린지

멘토링

N
클립

로드맵

Programming

/

Front-end

Next + React Query で SNS サービスを作成する

React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택을 사용하여 Twitter(X.com)와 유사한 SNS 서비스를 만들어보겠습니다. 마지막으로 검색 엔진 최적화를 위한 SSR까지!

（4.4）受講レビュー 128件

受講生 3,398名

難易度 中級以上

受講期間 無制限

  • zerocho
Next.js
Next.js
React
React
react-query
react-query
next-auth
next-auth
msw
msw
Next.js
Next.js
React
React
react-query
react-query
next-auth
next-auth
msw
msw
お知らせ一覧
zerocho님의 프로필 이미지
zerocho

Next 15 関連映像制作ガイド & SSR + SEO, Streaming, Suspense 関連整理

こんにちは。ゼロ秒です。

すぐにリアクト19、Next 15が出てくるようですが、12月中に正式版が出たら講義政策通り映像追加制作して上げます。既存に混乱していた部分も大挙再撮影予定です（next-auth、Streamingのようなもの）。

Streaming、Suspenseに関してお問い合わせが多いので（通常はSSR、SEOのために導入されますか？） 以下にまとめてみました。もっと気になる点があれば質問を残してください。

ありがとうございます。

チョ・ヒョンヨンの夢。

はじめに：一度講義のためにSSRを適用したことを示しましたが、おすすめの投稿リストのようなものはSSRする必要も、リストに対するSEOも必要ありません。毎回投稿が変わるから。個別の投稿ページ（/post/[id]）のようなものだけSEO適用すること。

loading.tsxなしでprefetchがある場合

  1. 唯一のコンテンツSSRになるケース

  2. SSRになるがprefetchが終わってこそ画面が見えるのでユーザーが苦しくなることがある

loading.tsxがなく、useSuspenseQueryのみがある場合

  1. fallback部分がないので無限リクエストを送る（使用X）

  2. https://github.com/TanStack/query/issues/6116#issuecomment-1904051005 で解決可能

loading.tsxでprefetchがある場合

  1. loading.tsxが開いて3秒後に投稿が表示されます。したがって、SSRではありません

  2. metadataやgenerateMetadataにSEO情報を入れなければならない

loading.tsxがありますが、Suspenseももう1つあり、prefetchはある場合

  1. Suspense fallbackが開いて3秒後に投稿が浮かぶ。したがって、SSRはありません

  2. コンテンツSSRなし。 metadataやgenerateMetadataにSEO情報を入れなければならない

loading.tsxがあり、prefetchがない場合

  1. コンテンツSSRなし。 metadataやgenerateMetadataにSEO情報を入れなければならない

  2. isPending: true の場合、ロードを表示するように直接コーディングする必要がある

ここまで知ることができる点：loading.tsxもSuspenseの一種であり、SuspenseはprefetchQueryやuseSuspenseQueryがある場合に動作する。

loading.tsxとprefetchQueryの中間にSuspenseがある場合は、中間が機能します。その理由は loading.tsx も Suspense で Suspense 構造が loading.tsx->中間 Suspense->prefetchQuery なら prefetchQuery は中間 Suspense にかかります。

loading.tsx、Suspense + useQuery、prefetchがない場合

  1. Loading.tsxは動作せず、Suspenseは動作しません。 isPending: true の読み込みが表示される

loading.tsx、Suspense + useSuspenseQuery、prefetchがない場合

  1. Loading.tsx 動作せず Suspense fallback の読み込みが表示される

  2. サーバーで1回、フロントで1回合計2回リクエストするので、非効率

    loading.tsxがあり、SuspenseなしでuseSuspenseQueryを書く場合

  1. loading.tsxの言葉。

  2. サーバーで1回、フロントで1回合計2回リクエストするので、非効率

結論：

  1. SSRが完全に完全になりたい場合は、loading.tsx＆別途SuspenseなしでprefetchQueryのみを使用してください

  2. useSuspenseシリーズの問題なので書かないでください

  3. SEOをmetadataに置き換えることができる場合は、 Suspenseを置いてprefetchQueryまたはSuspenseなしでuseQuery + isPendingローダーを書くだけです。前者はサーバーからインポートするもので、後者はクライアントからインポートするもの。 SSRもしないのに前者にする理由がないので、後者のおすすめ

  4. loading.tsxを書くか別のSuspenseを置くかを選択する基準：Loading.tsxはページ全体をロードするので、部分だけをロードしたい場合は別のSuspenseを使う

  5. layout.tsxではSuspenseを食べません

コメント