Komponen Pelayan lwn. Pelanggan dalam Next.js Bila dan Cara Menggunakannya

Next.js 13 memperkenalkan Komponen Pelayan React, memberikan pembangun kuasa untuk memilih tempat dan cara untuk membuat komponen—sama ada pada pelayan untuk prestasi atau pada klien untuk interaktiviti. Fleksibiliti ini membolehkan kami membina apl yang menggabungkan keupayaan kelajuan dan dinamik.

Dalam artikel ini, kami akan meneroka bukan sahaja asas, tetapi juga menyelami cara menggunakan komponen pelayan dalam komponen klien—keperluan biasa apabila membina apl yang dinamik dan cekap.

Memahami Komponen Pelayan

Komponen pelayan dipaparkan sepenuhnya pada pelayan dan tidak memerlukan sebarang JavaScript sisi klien. Ia sesuai untuk kandungan statik seperti pengepala, pengaki atau komponen terdorong data yang tidak memerlukan interaksi pengguna.

Contoh: Komponen Pelayan Mudah

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

Komponen ini dipaparkan pada pelayan dan tidak melibatkan sebarang interaksi pihak pelanggan, bermakna ia dimuatkan lebih cepat dengan kurang JavaScript.

Faedah Komponen Pelayan

• Muat JavaScript Dikurangkan: Komponen pelayan mengurangkan jumlah JavaScript yang dihantar ke penyemak imbas.
• Pengambilan Data yang Lebih Baik: Komponen pelayan boleh mengambil data lebih dekat dengan pangkalan data, mengurangkan kependaman rangkaian.

Mengambil Data dalam Komponen Pelayan

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Komponen PostList ini mengambil data pada pelayan dan menghantar HTML pra-diberikan kepada klien, memastikan masa pemuatan lebih cepat.

Bila Menggunakan Komponen Pelanggan

Komponen pelanggan adalah penting apabila anda memerlukan interaktiviti, seperti input borang, pendengar acara atau kandungan dinamik. Komponen ini menggunakan JavaScript pada klien untuk mengendalikan interaksi pengguna.

Contoh: Komponen Pelanggan untuk Interaktiviti

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

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

Bar Carian adalah interaktif, jadi ia perlu menjadi komponen pelanggan. Anda boleh menggunakan cangkuk useState dan cangkuk React lain hanya dalam komponen pelanggan.

Anda mungkin mempunyai kes penggunaan untuk menggabungkan Komponen Pelayan dan Pelanggan, jadi mari kita bincangkan cara untuk melakukannya seterusnya:

Menggabungkan Komponen Pelayan dan Pelanggan

Kekuatan teras Next.js 13 ialah keupayaan untuk menggabungkan komponen pelayan dan klien. Amalan terbaik ialah menggunakan komponen pelayan secara lalai dan menolak komponen klien sedalam mungkin ke dalam pepohon komponen anda.

Contoh: Menggabungkan Komponen Pelayan dan Klien

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

Komponen SearchBar mengendalikan interaktiviti sisi klien, manakala reka letak yang lain diberikan pelayan, menawarkan keseimbangan antara prestasi dan interaktiviti.

Sebaliknya, anda mungkin mempunyai kes penggunaan untuk menggunakan komponen pelayan di dalam komponen klien. Mari lihat cara melakukannya.

Cara Menggunakan Komponen Pelayan Di Dalam Komponen Pelanggan

Adalah penting untuk memahami bahawa komponen pelayan boleh bersarang di dalam komponen klien, tetapi tidak diimport terus ke dalamnya. Untuk memasukkan komponen pelayan dalam komponen klien, anda menyerahkannya sebagai kanak-kanak atau prop untuk mengelak daripada melanggar sempadan antara keduanya.

Contoh: Menghantar Komponen Pelayan kepada Komponen Pelanggan

Berikut ialah contoh dunia sebenar di mana komponen pelayan dihantar sebagai kanak-kanak kepada komponen klien:

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

Dalam contoh di atas:

• Profil ialah komponen pelayan, mengambil data atau memaparkan kandungan statik.
• Papan pemuka ialah komponen klien yang mengendalikan interaksi (menunjukkan/menyembunyikan profil).
• Komponen pelayan Profil dihantar sebagai kanak-kanak kepada komponen klien Papan Pemuka.

Corak ini membolehkan anda menggunakan faedah pemaparan pelayan (kurang JavaScript, prestasi yang dipertingkatkan) sambil masih mempunyai interaktiviti pihak pelanggan.

Perpustakaan dan Komponen Pelanggan Pihak Ketiga

Banyak perpustakaan pihak ketiga seperti penyedia pengesahan atau komponen UI bergantung pada cangkuk React, yang hanya boleh digunakan dalam komponen klien. Begini cara anda boleh mengatasi had itu dengan membungkus perpustakaan pihak ketiga di dalam komponen klien:

Contoh: Menggunakan Karusel Pihak Ketiga

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Dengan membungkus karusel licin tindak balas pihak ketiga dalam komponen pelanggan, kami boleh menggunakannya dalam halaman yang diberikan pelayan sambil masih mengakses ciri sisi klien seperti interaktiviti.

Mengendalikan Prop Antara Komponen Pelayan dan Pelanggan

Apabila menghantar data antara pelayan dan komponen klien, prop mestilah boleh bersiri (cth., rentetan, nombor, boolean). Objek kompleks seperti fungsi atau tika kelas tidak boleh diluluskan.

Contoh: Menghantar Data dari Pelayan kepada Pelanggan

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

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

Komponen klien UserCard kini boleh memaparkan data yang dihantar daripada komponen pelayan secara dinamik sambil memastikan semuanya kekal boleh bersiri dan dengan itu melepasi sempadan pelayan-klien tanpa masalah.

Dengan semua yang dikatakan, adalah menarik untuk menyimpulkan ini dengan amalan terbaik. Mari kita beralih ke seterusnya:

Amalan Terbaik untuk Komposisi Pelayan dan Komponen Pelanggan

Berikut ialah beberapa petua untuk mengarang komponen pelayan dan klien dengan berkesan:

1. Lalai kepada Komponen Pelayan: Gunakan komponen pelayan di mana mungkin untuk kandungan statik atau dipacu data untuk mengurangkan beban JavaScript dan meningkatkan prestasi.

2. Gunakan Komponen Pelanggan untuk Interaktiviti: Hanya gunakan komponen klien yang memerlukan interaksi pengguna atau API khusus penyemak imbas.

3. Alihkan Komponen Pelanggan ke Bawah Pokok: Tolak komponen klien sedalam mungkin ke dalam pepohon komponen. Ini membolehkan lebih banyak apl anda dipaparkan pada pelayan, meningkatkan prestasi.

4. Luluskan Komponen Pelayan sebagai Kanak-kanak: Jika komponen pelayan perlu digunakan dalam komponen klien, hantarkannya sebagai kanak-kanak atau prop dan bukannya mengimportnya terus.

Kata akhir: Mencapai Keseimbangan Antara Prestasi dan Interaktiviti

Dengan Next.js 13, anda mempunyai fleksibiliti untuk membuat komponen pada kedua-dua pelayan dan pelanggan. Dengan lalai kepada komponen pelayan untuk kandungan statik dan komponen klien untuk interaktiviti, dan dengan mengurus sempadan antara kedua-duanya dengan berhati-hati, anda boleh membina apl yang pantas dan dinamik.

Dengan mengikuti corak dan contoh di sini—seperti menghantar komponen pelayan ke dalam komponen pelanggan dan menggabungkannya dengan teliti—anda akan dapat memanfaatkan kuasa penuh Next.js 13 untuk mencipta aplikasi web interaktif yang berprestasi tinggi.

Selamat mengekod
Saya Michael.

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