Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Mereka Bentuk loading.tsx dan Rangka yang Bermakna

Bina keadaan pemuatan tahap laluan dan ruang letak rangka yang sepadan dengan susun atur akhir untuk mengelakkan anjakan.

Pelajaran 2 daripada 413 langkah

Mereka Bentuk loading.tsx dan Rangka yang Bermakna ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Mengapa loading.tsx Wujud

Dalam App Router, fail loading.tsx adalah istimewa: Next.js secara automatik membalut page.tsx segmen laluan anda dalam sempadan React <Suspense> dan memaparkan loading.tsx sebagai fallback sementara komponen pelayan distrim.

Anda mendapat keadaan pemuatan serta-merta dengan pemasangan Suspense manual sifar.
Ia hanya dicetuskan semasa pemaparan pelayan segmen tersebut, bukan pada setiap interaksi klien.
Fallback dipaparkan serta-merta sementara data tak segerak halaman selesai diperoleh.

Pelajaran ini membincangkan cara menjadikan fallback itu bermakna supaya pengguna merasakan kelajuan dan susun atur tidak berubah secara mendadak.

Konvensyen Fail

Letakkan loading.tsx bersebelahan dengan page.tsx dalam mana-mana segmen laluan. Eksport lalainya dipaparkan sebagai fallback Suspense untuk segmen tersebut dan segala-galanya di bawahnya.

Ia ialah komponen React biasa — ia boleh menjadi Komponen Pelayan (lalai) kerana hanya menampilkan penanda statik.
Tiada prop dihantar kepadanya; komponen ini mesti kendiri.
Pastikan ia ringan supaya dapat dihantar dan dipaparkan dengan pantas.

// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="dashboard-grid" aria-busy="true">
      <DashboardSkeleton />
    </div>
  );
}

Matlamat Sebenar: Elakkan Perubahan Susun Atur

Keadaan pemuatan yang buruk menggantikan halaman anda dengan pemutar pemuatan di tengah, kemudian bertukar secara mendadak kepada susun atur yang sama sekali berbeza apabila data tiba. Perubahan visual ini menjejaskan prestasi yang dirasakan dan Cumulative Layout Shift (CLS).

Skeleton yang baik mencerminkan susun atur akhir:

Bilangan kad, baris dan lajur yang sama.
Lebar dan tinggi anggaran yang sama seperti kandungan sebenar.
Jarak dan struktur grid yang sama.

Apabila data sebenar menggantikannya, tiada apa-apa yang bergerak — hanya pemegang tempat kelabu yang dipenuhi kandungan.

Primitif Skeleton yang Boleh Digunakan Semula

Mulakan dengan satu blok binaan kecil: kotak Skeleton yang memaparkan segi empat tepat kelabu dengan bucu bulat. Semua yang lain digabungkan daripadanya.

Terima className supaya pemanggil boleh mengawal lebar, tinggi dan bentuk.
Tambahkan gaya animate-pulse (Tailwind) atau kesan kilauan CSS untuk memberikan rasa sedang dimuatkan.
Tandainya sebagai aria-hidden — ia hiasan, bukannya kandungan sebenar.

// components/skeleton.tsx
export function Skeleton({ className = '' }: { className?: string }) {
  return (
    <div
      aria-hidden="true"
      className={`animate-pulse rounded-md bg-gray-200 ${className}`}
    />
  );
}

Memadankan Reka Letak Akhir

Bina rangka dengan menyalin struktur komponen sebenar, kemudian gantikan teks dan imej dengan kotak Skeleton yang saiznya sepadan.

Avatar menjadi bulatan: h-10 w-10 rounded-full.
Baris tajuk menjadi bar yang lebar; sari kata menjadi bar yang lebih pendek dan nipis.
Gunakan kelas bekas yang sama (pengisi, jarak, sempadan) seperti kad sebenar.

// components/user-card-skeleton.tsx
import { Skeleton } from './skeleton';

export function UserCardSkeleton() {
  return (
    <div className="flex items-center gap-4 rounded-lg border p-4">
      <Skeleton className="h-10 w-10 rounded-full" />
      <div className="flex-1 space-y-2">
        <Skeleton className="h-4 w-1/3" />
        <Skeleton className="h-3 w-1/2" />
      </div>
    </div>
  );
}

Senarai: Ulang Rangka Baris

Untuk senarai dan jadual, paparkan bilangan rangka baris yang tetap — cukup untuk memenuhi ruang pandang biasa supaya halaman kelihatan lengkap.

Gunakan semula rangka satu baris di dalam tatasusunan.
Pilih bilangan yang lebih kurang sepadan dengan saiz halaman biasa anda (contohnya, 6–8 baris).
Kekalkan gap dan pembalut yang sama seperti senarai sebenar untuk mengekalkan jarak.

// components/user-list-skeleton.tsx
import { UserCardSkeleton } from './user-card-skeleton';

export function UserListSkeleton({ rows = 6 }: { rows?: number }) {
  return (
    <div className="space-y-3">
      {Array.from({ length: rows }).map((_, i) => (
        <UserCardSkeleton key={i} />
      ))}
    </div>
  );
}

Menyepadukan Rangka ke dalam loading.tsx

Sekarang loading.tsx hanya menggabungkan komponen rangka anda di dalam reka letak luar yang sama seperti halaman. Pengepala yang statik (tidak bergantung pada data) boleh dipaparkan seperti biasa walaupun dalam keadaan pemuatan.

Paparkan bahagian sebenar yang tersedia serta-merta (tajuk halaman, tab).
Tukarkan hanya bahagian yang terikat pada data kepada rangka.
Dengan ini, halaman kelihatan seolah-olah sudah separa dimuatkan.

// app/dashboard/users/loading.tsx
import { UserListSkeleton } from '@/components/user-list-skeleton';

export default function Loading() {
  return (
    <section className="mx-auto max-w-2xl p-6">
      <h1 className="mb-4 text-2xl font-bold">Users</h1>
      <UserListSkeleton rows={6} />
    </section>
  );
}

loading.tsx berbanding Suspense Tahap Komponen

loading.tsx meliputi seluruh segmen — jika mana-mana data pada halaman lambat, keseluruhan sandaran akan dipaparkan. Ada kalanya anda memerlukan kawalan yang lebih terperinci supaya kandungan yang pantas dipaparkan dahulu.

Gunakan loading.tsx untuk paparan awal seluruh segmen.
Bungkus komponen individu yang lambat dalam <Suspense> dengan sandaran rangka masing-masing supaya komponen tersebut distrim secara berasingan.
Gabungkan kedua-duanya: rangka segmen yang ringkas, serta Suspense terperinci untuk widget yang paling lambat.

// app/dashboard/page.tsx
import { Suspense } from 'react';
import { RevenueChart } from './revenue-chart';
import { ChartSkeleton } from './chart-skeleton';

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Overview</h1>
      {/* Static + fast content paints immediately */}
      <Suspense fallback={<ChartSkeleton />}>
        {/* Slow async server component streams in later */}
        <RevenueChart />
      </Suspense>
    </main>
  );
}

Fungsi Tulen untuk Bilangan Rangka

Berapakah bilangan baris rangka yang patut dipaparkan? Pembantu kecil memastikan bilangan itu konsisten dan mengehadkannya kepada julat yang munasabah supaya anda tidak pernah memaparkan bilangan ruang letak yang keterlaluan.

Logik ini ialah TypeScript biasa — tiada rangka kerja terlibat — jadi anda boleh mengujinya secara unit secara berasingan.

function skeletonRowCount(pageSize: number, viewportRows = 8): number {
  if (!Number.isFinite(pageSize) || pageSize <= 0) return viewportRows;
  return Math.min(pageSize, viewportRows);
}

console.log(skeletonRowCount(20));  // 8  (clamped to viewport)
console.log(skeletonRowCount(3));   // 3  (fewer items than viewport)
console.log(skeletonRowCount(0));   // 8  (fallback default)
console.log(skeletonRowCount(-5));  // 8  (guards invalid input)

Kebolehcapaian & Gerakan Dikurangkan

Rangka ialah hiasan, tetapi masih memberi kesan kepada teknologi bantuan dan pengguna yang sensitif terhadap gerakan.

Tandai kawasan pemuatan dengan aria-busy="true" dan setiap ruang letak dengan aria-hidden="true".
Sediakan status yang disembunyikan secara visual seperti <span className="sr-only">Loading users</span> untuk pembaca skrin.
Hormati prefers-reduced-motion supaya animasi denyutan tidak dijalankan untuk pengguna yang memilih untuk tidak menggunakannya.

/* globals.css */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse {
    animation: none;
  }
}

Kesilapan Lazim

Elakkan kesilapan berikut yang menjejaskan tujuan rangka:

Sandaran pemutar sahaja: tidak memberikan petunjuk tentang reka letak dan pasti menyebabkan anjakan apabila kandungan tiba.
Saiz tidak sepadan: jika kad rangka setinggi 60px tetapi kad sebenar setinggi 96px, halaman masih akan melompat.
Melupakan pembalut: pengisi atau grid yang berbeza antara rangka dan halaman akan menganjakkan segala-galanya.
Rangka untuk data pantas: jika segmen dimuatkan dalam masa <100ms, rangka yang muncul seketika boleh terasa lebih teruk — pertimbangkan Suspense tahap komponen hanya untuk bahagian yang lambat.

Semakan Pantas

Uji pemahaman anda tentang keadaan pemuatan tahap laluan dan rangka.

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari cara membina keadaan pemuatan yang bermakna dalam App Router:

loading.tsx ialah sandaran Suspense automatik untuk segmen laluannya.
Bina rangka daripada primitif Skeleton yang kecil dan gabungkannya supaya mencerminkan reka letak akhir.
Padankan pembalut, bilangan dan dimensi untuk mengelakkan anjakan reka letak (CLS).
Paparkan bahagian statik yang tersedia serta-merta (tajuk, tab) seperti biasa; gunakan rangka hanya untuk bahagian yang terikat pada data.
Gunakan loading.tsx untuk paparan awal seluruh segmen dan <Suspense> tahap komponen untuk menstrim widget yang lambat secara berasingan.
Tangani kebolehcapaian dengan aria-busy, aria-hidden, status sr-only dan prefers-reduced-motion.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mereka Bentuk loading.tsx dan Rangka yang Bermakna” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Mereka Bentuk loading.tsx dan Rangka yang Bermakna”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mereka Bentuk loading.tsx dan Rangka yang Bermakna”?

Bina keadaan pemuatan tahap laluan dan ruang letak rangka yang sepadan dengan susun atur akhir untuk mengelakkan anjakan. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Mereka Bentuk loading.tsx dan Rangka yang Bermakna” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Sempadan Suspense dan Penstriman Tahap Komponen
Mereka Bentuk loading.tsx dan Rangka yang Bermakna
Prapemaparan Separa: Rangka Statik, Ruang Dinamik
Perangkap Penstriman: Anjakan Susun Atur dan Air Terjun

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)