Memahami Arahan \'use client\' dalam Next.js 13

Dalam Next.js 13, pengenalan direktori apl baharu telah membawa perubahan ketara dalam cara komponen dipaparkan. Secara lalai, komponen dalam direktori aplikasi dianggap sebagai komponen pelayan, yang dipaparkan pada pelayan. Tingkah laku lalai ini dioptimumkan untuk prestasi dan pengambilan data tetapi disertakan dengan pengehadan apabila melibatkan interaktiviti pihak pelanggan. Untuk menangani perkara ini, Next.js 13 memperkenalkan arahan "gunakan klien", yang secara eksplisit menetapkan komponen atau fail sebagai JavaScript sisi klien.

Mengapa Kami Menggunakan "use client"

Interaktiviti Sebelah Pelanggan

Jika komponen perlu berinteraksi dengan penyemak imbas (cth., mengendalikan acara pengguna seperti klik atau mengakses storan setempat), ia mesti ditandakan dengan "guna klien". Ini kerana komponen pelayan tidak boleh mengakses API penyemak imbas, pendengar acara atau ciri sisi klien yang lain.

Cangkuk dan Pengurusan Negeri

Cangkuk seperti useState, useEffect, useRef, dsb., hanya boleh digunakan dalam komponen klien. Oleh itu, menandakan fail atau komponen dengan "use client" adalah perlu apabila menggunakan cangkuk ini.

Pengendalian Acara

Pengendali acara bertindak balas (seperti onClick, onChange) memerlukan komponen untuk dijalankan dalam penyemak imbas. Akibatnya, komponen tersebut hendaklah ditandakan sebagai komponen pelanggan.

Di Mana Ia Digunakan

Anda meletakkan "guna klien" di bahagian atas fail untuk mana-mana komponen yang perlu diberikan pada bahagian klien:

"use client";

import { useState } from "react";

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Perkara Penting

Arahan Peringkat Atas

Ia mesti diletakkan di bahagian atas fail, sebelum sebarang import atau kod lain.

Skop

Apabila anda menambahkan "gunakan klien" pada fail, semua komponen di dalam fail itu menjadi komponen klien, bermakna ia disatukan dan dijalankan pada penyemak imbas.

Penggunaan Terpilih

Adalah disyorkan untuk menggunakannya hanya jika perlu kerana komponen pelayan lebih cekap dari segi prestasi dan pengambilan data.

Ringkasan

Ringkasnya, arahan "gunakan klien" diperlukan apabila anda ingin membina komponen interaktif pihak klien dalam rangka kerja yang, secara lalai, mengutamakan pemaparan dan pengoptimuman bahagian pelayan. Dengan menandai komponen secara eksplisit sebagai bahagian pelanggan, anda boleh memanfaatkan kuasa penuh ciri sisi klien React, seperti cangkuk dan pengendalian acara, sambil masih mendapat manfaat daripada kelebihan prestasi pemaparan bahagian pelayan yang sesuai.

Baki ini membolehkan pembangun mencipta aplikasi web yang sangat interaktif dan berprestasi, mengambil kesempatan daripada pemaparan bahagian pelayan dan pelanggan mengikut keperluan.

Atas ialah kandungan terperinci Memahami Arahan \'use client\' dalam Next.js 13. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!