Rumah > Artikel > hujung hadapan web > 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.
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 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.
'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 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.
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.
Next.js memperhalusi cara komponen pelayan dan klien berinteraksi. Berikut ialah beberapa peningkatan yang paling ketara:
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.
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.
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.
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.
// 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.
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!