본문으로 건너뛰기
cccskills
무료GitHub에 공개

nextjs-streaming-suspense

Use this skill when adding loading UI, Suspense boundaries, partial streaming, or progressive rendering in Next.js 16. Trigger words: ローディング, loading.tsx, Suspense, ストリーミング, streaming, スケルトン, 遅いデータ, 段階表示.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md2.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Next.js Streaming & Suspense

いつ使うか

  • データ取得が遅く、ページ全体をブロックせず段階的に表示したいとき。
  • ローディング UI(スケルトン)を出したいとき。
  • 重いコンポーネントを後追いで流し込みたいとき。

やること

  • ルート単位の即時ローディングは loading.tsx を置く(自動で Suspense になる)。
  • 部分的なストリーミングは <Suspense fallback={...}> で遅いコンポーネントを包む。
  • データ取得はできるだけ並列化(Promise.all ではなく、独立したコンポーネントに分けて各々 await)。
  • スケルトンは実レイアウトに寄せて CLS を防ぐ。

守るルール

  • ✅ 遅い部分だけを Suspense で隔離し、速い部分は即座に見せる。
  • ✅ fallback は最終レイアウトと同寸法(レイアウトシフト防止)。
  • ✅ ストリーミング対象は Server Component のまま保つ。
  • ❌ ページ全体を 1 つの await でブロックしない。
  • ❌ Suspense 境界の中で 'use client' 副作用に依存した取得をしない。

典型例(コード片)

// app/dashboard/page.tsx
import { Suspense } from 'react';
import { Stats } from './stats';          // 速い
import { SlowFeed } from './slow-feed';    // 遅い(外部 API)

export default function Dashboard() {
  return (
    <section>
      <Stats />
      <Suspense fallback={<FeedSkeleton />}>
        <SlowFeed />
      </Suspense>
    </section>
  );
}

アンチパターン

  • 全データを親で await してから描画(最初の 1 バイトまで遅延)。
  • fallback を null にして読み込み中に空白 → 突然表示(ガタつく)。
  • スピナーだけで具体的な構造を見せず、体感速度を落とす。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Akira-Papa/claude-code-nextjs-mongo-template-162026년 5월 24일 업데이트

Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Akira-Papa/claude-code-nextjs-mongo-template-162026년 5월 24일 업데이트

Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Akira-Papa/claude-code-nextjs-mongo-template-162026년 5월 24일 업데이트

bootstrap

무료

Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Akira-Papa/claude-code-nextjs-mongo-template-162026년 5월 24일 업데이트

Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Akira-Papa/claude-code-nextjs-mongo-template-162026년 5월 24일 업데이트

Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Akira-Papa/claude-code-nextjs-mongo-template-162026년 5월 24일 업데이트

Akira-Papa의 스킬 모두 보기

이 스킬의 문제 신고