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

Sempadan Suspense dan Penstriman Tahap Komponen

Balut komponen data yang perlahan dalam Suspense untuk menstrimkannya secara berasingan daripada rangka statik.

Pelajaran 1 daripada 413 langkah

Sempadan Suspense dan Penstriman Tahap Komponen ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 1 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 Menstrim pada Tahap Komponen?

Dalam App Router, halaman boleh mengandungi kandungan statik yang pantas (pengepala, navigasi, rangka susun atur) dan kandungan bergantung pada data yang perlahan (widget papan pemuka yang mengakses API pihak ketiga).

Tanpa penstriman, seluruh halaman menunggu fetch paling perlahan selesai sebelum apa-apa dipaparkan. Ini menjejaskan prestasi yang dirasakan pengguna.

Penstriman pada tahap komponen membolehkan Next.js menghantar rangka statik serta-merta, kemudian menstrim setiap bahagian perlahan apabila datanya selesai diperoleh. Alat yang membolehkannya ialah sempadan <Suspense> React.

Masalah Penyekatan

Di sini, satu Komponen Pelayan tak segerak menunggu pertanyaan yang perlahan. Oleh sebab halaman melakukan await sebelum memulangkan JSX, pengguna tidak melihat apa-apa sehingga fetch selama 2 saat itu selesai.

Bahagian halaman yang pantas (tajuk, susun atur) ditahan oleh bahagian yang perlahan.

// app/dashboard/page.tsx
async function getStats() {
  // simulates a slow 2s upstream call
  await new Promise((r) => setTimeout(r, 2000));
  return { revenue: 4200, orders: 87 };
}

export default async function DashboardPage() {
  const stats = await getStats(); // blocks the WHOLE page
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Revenue: {stats.revenue}</p>
      <p>Orders: {stats.orders}</p>
    </main>
  );
}

Asingkan Bahagian Perlahan kepada Komponen Sendiri

Langkah pertama untuk penstriman ialah pengasingan: pindahkan data yang ditunggu ke dalam Komponen Pelayan tak segerak yang berasingan.

Halaman itu sendiri tidak lagi melakukan await, jadi rangka statiknya boleh dipaparkan serta-merta. Kerja yang perlahan kini berada dalam <Stats />.

// app/dashboard/stats.tsx
async function getStats() {
  await new Promise((r) => setTimeout(r, 2000));
  return { revenue: 4200, orders: 87 };
}

export async function Stats() {
  const stats = await getStats();
  return (
    <section>
      <p>Revenue: {stats.revenue}</p>
      <p>Orders: {stats.orders}</p>
    </section>
  );
}

Balutnya dalam Sempadan Suspense

Sekarang, balut komponen yang perlahan dengan <Suspense> dan berikan fallback. Next.js memaparkan rangka bersama fallback serta-merta, kemudian menstrim komponen sebenar melalui respons HTTP yang sama apabila datanya selesai diperoleh.

fallback dipaparkan sementara data sempadan masih belum tersedia.
Segala-galanya di luar sempadan dihantar serta-merta.

// app/dashboard/page.tsx
import { Suspense } from 'react';
import { Stats } from './stats';

export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1> {/* sent immediately */}
      <Suspense fallback={<p>Loading stats…</p>}>
        <Stats /> {/* streamed in when ready */}
      </Suspense>
    </main>
  );
}

Fallback yang Baik ialah Skeleton

fallback hendaklah sepadan dengan bentuk kandungan akhir untuk mengelakkan perubahan susun atur. Pemegang tempat skeleton jauh lebih baik daripada pemutar pemuatan kosong kerana ia menyediakan ruang dan memberi petunjuk tentang kandungan yang akan muncul.

Pastikan skeleton menjadi Komponen Klien atau Pelayan yang ringkas dan pantas, tanpa kebergantungan pada data.

// app/dashboard/stats-skeleton.tsx
export function StatsSkeleton() {
  return (
    <section aria-hidden className="animate-pulse">
      <div className="h-6 w-40 rounded bg-gray-200" />
      <div className="mt-2 h-6 w-32 rounded bg-gray-200" />
    </section>
  );
}

// usage:
// <Suspense fallback={<StatsSkeleton />}>
//   <Stats />
// </Suspense>

Berbilang Sempadan Bebas

Setiap <Suspense> menstrim secara bebas. Jika anda mempunyai beberapa widget yang perlahan, berikan setiap satu sempadannya sendiri supaya widget yang perlahan tidak pernah menyekat widget yang pantas.

Di bawah, RecentOrders mungkin selesai dalam 300ms manakala Revenue mengambil masa 2 saat — dan setiap satunya muncul sebaik sahaja tersedia, dalam apa-apa urutan.

import { Suspense } from 'react';
import { Revenue } from './revenue';
import { RecentOrders } from './recent-orders';
import { RevenueSkeleton, OrdersSkeleton } from './skeletons';

export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Suspense fallback={<RevenueSkeleton />}>
        <Revenue />
      </Suspense>
      <Suspense fallback={<OrdersSkeleton />}>
        <RecentOrders />
      </Suspense>
    </main>
  );
}

Kehalusan Sempadan ialah Pilihan Reka Bentuk

Anda menentukan cara mengumpulkan komponen yang perlahan di bawah sempadan:

Satu sempadan bagi setiap widget → setiap widget muncul sendiri (terbaik untuk data yang tidak berkaitan).
Satu sempadan mengelilingi kumpulan → kumpulan muncul serentak selepas semua datanya selesai diperoleh (sesuai apabila paparan yang terselaras kelihatan lebih kemas).

Sempadan dikongsi hanya menstrim apabila anak paling perlahan di dalamnya sudah tersedia, jadi jangan secara tidak sengaja menggabungkan widget pantas dengan widget perlahan.

Menghantar Promise ke Bawah dengan Hook `use`

Corak alternatif: mulakan fetch dalam induk tanpa menunggu, kemudian hantarkan promise kepada anak yang membukanya dengan hook use React. Anak tersebut mesti berada di dalam sempadan <Suspense>, yang akan digantung sementara menunggu promise.

Ini membolehkan induk memulakan beberapa permintaan secara selari sebelum mana-mana daripadanya menyekat proses.

// app/dashboard/page.tsx
import { Suspense } from 'react';
import { Stats } from './stats';

function getStats() {
  return new Promise<{ revenue: number }>((r) =>
    setTimeout(() => r({ revenue: 4200 }), 2000),
  );
}

export default function Page() {
  const statsPromise = getStats(); // NOT awaited
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <Stats statsPromise={statsPromise} />
    </Suspense>
  );
}

Komponen Klien yang Membaca Promise

Anak menggunakan use(promise) untuk membaca nilai yang telah selesai diperoleh. Apabila promise masih belum selesai, use menggantung pemaparan dan <Suspense> terdekat memaparkan fallbacknya.

use boleh dipanggil dalam Komponen Klien, menjadikannya cara idiomatik untuk menstrim promise yang dimulakan oleh pelayan ke dalam antara muka pengguna interaktif.

// app/dashboard/stats.tsx
'use client';
import { use } from 'react';

export function Stats({
  statsPromise,
}: {
  statsPromise: Promise<{ revenue: number }>;
}) {
  const stats = use(statsPromise); // suspends until resolved
  return <p>Revenue: {stats.revenue}</p>;
}

loading.tsx ialah Suspense Peringkat Laluan

Fail bernama loading.tsx dalam segmen laluan ialah kemudahan sintaks: Next.js secara automatik membalut page.tsx segmen tersebut dalam <Suspense> dengan menggunakan fail pemuatan sebagai fallback.

loading.tsx → menstrim seluruh halaman semasa halaman dimuatkan (satu sempadan besar).
<Suspense> manual → menstrim bahagian halaman secara bebas.

Gunakan loading.tsx untuk paparan pertama yang umum, dan <Suspense> sebaris untuk penstriman komponen yang lebih terperinci dalam halaman.

// app/dashboard/loading.tsx
export default function Loading() {
  return <p>Loading dashboard…</p>;
}

Jangan Lupa: Fungsi Tulen Boleh Diuji Secara Berasingan

Logik pembentukan data yang membekalkan komponen yang distrim hanyalah TypeScript biasa — kekalkan ketulenannya supaya anda boleh mengujinya tanpa pelayan. Di sini terdapat peringkas kendiri yang boleh dijalankan oleh mana-mana penilai.

type Order = { id: number; total: number };

function summarize(orders: Order[]): { count: number; revenue: number } {
  const revenue = orders.reduce((sum, o) => sum + o.total, 0);
  return { count: orders.length, revenue };
}

const orders: Order[] = [
  { id: 1, total: 1200 },
  { id: 2, total: 3000 },
];

const result = summarize(orders);
console.log(`Orders: ${result.count}, Revenue: ${result.revenue}`);

Semakan Pantas

Anda mempunyai halaman papan pemuka dengan pengepala pantas dan dua widget perlahan: <Revenue /> (kira-kira 2 saat) dan <Orders /> (kira-kira 300ms). Anda mahu pengepala muncul serta-merta dan setiap widget muncul sebaik sahaja datanya sendiri tersedia, secara bebas.

Jawab dalam pelajaran interaktif

Ringkasan

Perkara utama tentang penstriman pada tahap komponen:

Asingkan pengambilan data yang perlahan ke dalam Komponen Pelayan tak segerak masing-masing.
Balut setiap satunya dengan <Suspense fallback={…}> — rangka dan segala-galanya di luar sempadan distrim serta-merta.
Gunakan fallback skeleton yang sepadan dengan bentuk akhir untuk mengelakkan perubahan susun atur.
Berbilang sempadan menstrim secara bebas; sempadan yang dikongsi menunggu anaknya yang paling perlahan.
Hantarkan promise yang belum ditunggu ke bawah dan bacanya dengan hook use untuk data selari yang distrim.
loading.tsx ialah Suspense automatik pada peringkat laluan untuk paparan pertama yang umum; <Suspense> sebaris mengendalikan penstriman yang lebih terperinci.

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 “Sempadan Suspense dan Penstriman Tahap Komponen” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Sempadan Suspense dan Penstriman Tahap Komponen”, 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 “Sempadan Suspense dan Penstriman Tahap Komponen”?

Balut komponen data yang perlahan dalam Suspense untuk menstrimkannya secara berasingan daripada rangka statik. 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 1 daripada 4.

Berapa lamakah pelajaran “Sempadan Suspense dan Penstriman Tahap Komponen” 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)