Komponen Pelanggan lwn Pelayan dalam Next.js

Dalam versi Next.js ini, kami akan meneroka komponen klien dan pelayan, perbezaannya, bila hendak menggunakan setiap satu dan memberikan contoh praktikal untuk membantu anda melaksanakannya dalam projek.

Apakah Komponen Pelanggan dan Pelayan dalam Next.js?

Dalam Next.js, terdapat perbezaan yang jelas antara Komponen Pelanggan dan Komponen Pelayan. Pemisahan ini membolehkan anda membuat keputusan yang lebih baik tentang tempat dan cara memproses kod, memberi kesan secara langsung kepada prestasi dan pengalaman pengguna.

Komponen Pelanggan

Komponen Pelanggan dijalankan dalam penyemak imbas, membenarkan interaktiviti dan akses kepada API penyemak imbas seperti tetingkap atau dokumen. Ia sesuai untuk mengurus antara muka dinamik aplikasi anda dan bertindak balas kepada tindakan pengguna.

Ciri-ciri Utama:

• Jalankan dalam penyemak imbas (pelanggan).
• Ada akses kepada cangkuk seperti useState atau useEffect.
• Digunakan untuk mengendalikan interaksi dinamik seperti borang atau butang.
• Penting apabila anda perlu bertindak balas dengan cepat terhadap tindakan pengguna.

Contoh Komponen Pelanggan:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Client-side Counter</h1>
      <p>The count value is: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Contoh klasik ini ialah kaunter yang membolehkan pengguna berinteraksi secara langsung dengan halaman. 'pengguna pelanggan'; arahan memberitahu Next.js bahawa komponen ini harus dilaksanakan dalam penyemak imbas.

Komponen Pelayan

Komponen Pelayan ialah ciri baharu dalam seni bina Next.js. Komponen ini diproses pada pelayan dan menghantar HTML yang telah diberikan kepada penyemak imbas. Ini mengurangkan jumlah JavaScript yang sampai kepada pelanggan, mempercepatkan pemuatan halaman awal.

Ciri-ciri Utama:

• Diberikan pada pelayan.
• Tidak mempunyai akses kepada API penyemak imbas seperti tetingkap atau dokumen, mahupun kepada cangkuk React seperti useState.
• Boleh berinteraksi secara langsung dengan pangkalan data atau API luaran.
• Optimumkan prestasi dengan menghantar HTML dan bukannya JavaScript kepada pelanggan.

Contoh Komponen Pelayan:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>Data from the Server</h1>
      <p>{data.message}</p>
    </div>
  );
}

Dalam contoh ini, komponen dipaparkan pada pelayan, mendapatkan semula data daripada API, dan kemudian mengembalikan HTML yang diberikan. Ini bermakna logik pengambilan data tidak sampai kepada pelanggan, meningkatkan prestasi.

Ciri Baharu dalam Next.js

Next.js memperhalusi cara komponen pelayan dan klien berinteraksi. Berikut ialah beberapa peningkatan yang paling ketara:

1. Komponen Pelayan secara Lalai

Komponen kini Komponen Pelayan secara lalai. Ini bermakna aplikasi anda mengoptimumkan secara automatik dengan menghantar kurang JavaScript ke penyemak imbas, melainkan anda memerlukan Komponen Pelanggan secara eksplisit.

2. Penstriman Dioptimumkan

Penstriman membenarkan komponen dimuatkan dalam bahagian. Ini berguna untuk halaman yang besar atau berat data, kerana bahagian halaman boleh dimuatkan apabila ia bersedia, tanpa menunggu semua kandungan tersedia.

3. Kawalan Berbutir

Next.js menjadikannya lebih mudah untuk memutuskan sama ada komponen akan dijalankan pada pelayan atau klien, memberikan anda lebih kawalan ke atas cara mengoptimumkan aplikasi anda.

4. Penghidratan yang Diperbaiki

Penghidratan ialah proses yang menukarkan HTML statik yang dihantar daripada pelayan kepada halaman interaktif pada klien. Dengan Next.js, penghidratan adalah lebih cekap dan selektif, hanya berlaku apabila perlu.

Bila Menggunakan Komponen Pelanggan vs Pelayan

Gunakan Komponen Pelanggan Apabila:

1. Interaktiviti Pengguna: Apabila anda perlu mengendalikan interaksi seperti borang atau butang yang bertindak balas dalam masa nyata.
2. Pengurusan Negeri: Sesuai untuk mengurus negeri tempatan yang berubah secara dinamik, seperti troli beli-belah.
3. Animasi dan Kesan Visual: Apabila bergantung pada animasi atau kesan yang dikemas kini berdasarkan interaksi pengguna.

Gunakan Komponen Pelayan Apabila:

1. Pertanyaan Pangkalan Data: Apabila anda perlu mengambil data daripada pangkalan data sebelum memaparkan kandungan.
2. Kandungan Statik: Sesuai apabila kandungan tidak kerap berubah dan tidak memerlukan interaktiviti.
3. Peningkatan SEO: Kandungan yang diberikan pelayan lebih mudah diakses oleh enjin carian, meningkatkan SEO.

Contoh Menggabungkan Komponen Pelanggan dan Pelayan:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    <div>
      <h1>Product List (Server-rendered)</h1>
      <ul>
        {data.map((product: any) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search product"
      />
      <p>Searching for: {search}</p>
    </div>
  );
}

Dalam contoh ini, pelayan memaparkan senarai produk dan menghantarnya kepada pelanggan, manakala komponen carian adalah interaktif dan diuruskan di sisi pelanggan.

Kesimpulan

Next.js mewakili titik perubahan dalam cara kami membangunkan aplikasi web, mengoptimumkan prestasi dan pengalaman pengguna. Penggunaan cekap Komponen Pelayan dan Komponen Pelanggan membolehkan anda membina aplikasi yang pantas dan dinamik dengan beban awal yang lebih ringan.

Memilih dengan betul antara Komponen Pelayan dan Komponen Pelanggan adalah penting untuk memanfaatkan sepenuhnya keupayaan rangka kerja. Dengan peningkatan baharu ini, lebih mudah untuk membuat keputusan termaklum dan mencipta aplikasi yang bukan sahaja pantas tetapi juga interaktif dan berskala.

Atas ialah kandungan terperinci Komponen Pelanggan lwn Pelayan dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!