Fungsi Edge mungkin merupakan konsep kecil yang terdefinisi dengan baik, tetapi Anda dapat menggunakannya untuk berbagai tujuan.

Next.js adalah kerangka kerja sumber terbuka yang populer untuk mengembangkan aplikasi React yang dirender di sisi server. Berkat kemudahan penggunaan dan kemampuan beradaptasinya, Anda dapat menggunakannya untuk membuat aplikasi web yang kompleks.

Fungsi tepi adalah salah satu fitur paling menarik dari Next.js. Pelajari tentang fungsi Edge dan lima cara untuk menggunakannya di Next.js.

Apa Itu Fungsi Tepi?

Fitur fungsi Edge canggih dari Next.js memungkinkan Anda menjalankan fungsi tanpa server khusus lebih dekat ke pengguna akhir di jaringan edge. Ini menyiratkan bahwa kode berjalan di server yang ditemukan secara geografis lebih dekat ke klien, menghasilkan kinerja yang lebih cepat dan lebih banyak dalam aplikasi web.

Fungsi tepi dapat mengubah permintaan atau respons, mengambil data, mengautentikasi, dan lainnya.

Fungsi tepi berjalan secara instan. Karena mereka mengurangi waktu yang diperlukan untuk memuat data dan merender halaman, Anda dapat menggunakan fungsi Edge untuk meningkatkan kinerja web dan pengalaman pengguna.

instagram viewer

Kebutuhan gadget modern dan generasi mendatang komputasi tepi karena lebih dapat diandalkan dan aman daripada komputasi awan dan memanfaatkan fungsi Edge. Selain itu, ini lebih mumpuni dan fleksibel daripada komputasi sendirian di perangkat.

Berikut adalah beberapa cara Anda dapat menggunakan fungsi Edge di Next.js.

1. Perutean Dinamis

Salah satu cara Anda dapat menggunakan fungsi Edge di Next.js adalah melalui perutean dinamis. Anda dapat menentukan dan mengelola rute kustom berdasarkan data dinamis, seperti parameter kueri atau header permintaan.

Ini berharga untuk membuat aplikasi web yang lebih mudah beradaptasi dan dinamis yang menangani berbagai permintaan.

Anda dapat menggunakan fungsi Edge Next.js untuk menerapkan perutean dinamis dengan cara berikut:

// halaman/api/[slug].js
eksporbawaanfungsipawang(req, res) {
const { siput } = req.permintaan;
jika (siput 'tentang') {
 res.status(200).mengirim('Ini halaman tentang!');
 } kalau tidakjika (siput 'kontak') {
 res.status(200).mengirim('Ini adalah halaman kontak!');
 } kalau tidak {
 res.status(404).mengirim('Halaman tidak ditemukan.');
 }
}

Contoh ini menunjukkan isi dari file bernama [slug.js] dalam halaman/api direktori untuk menentukan rute khusus dengan data dinamis. Batas slug kemudian dihapus dari kueri permintaan menggunakan req.query, yang memungkinkan Anda menangani permintaan yang didasarkan pada nilai siput.

Misalnya, jika pengguna pergi ke http://example.com/api/about, parameter slug akan diatur ke tentang. Itu pawang fungsi akan menjalankan blok kode yang sesuai dan menampilkan pesan "Ini adalah halaman tentang!"

Jika klien berkunjung http://example.com/api/contact, pawang akan mengembalikan pesan "Ini adalah halaman kontak!"

Menggunakan fungsi Edge untuk perutean dinamis, pengembang dapat membuat aplikasi web yang lebih mudah beradaptasi dan dinamis yang dapat menangani berbagai permintaan berdasarkan perubahan data.

2. Pengambilan Data

Di Next.js, satu kasus penggunaan umum untuk fungsi Edge adalah pengambilan data. Anda dapat mengurangi beban pada server dan meningkatkan kinerja aplikasi web dengan membawa data ke edge.

Fungsi Edge Next.js dapat melakukan pengambilan data, seperti yang ditunjukkan dalam contoh ini:

// halaman/api/pengguna/[id].js
eksporbawaanasinkronfungsipawang(req, res) {
const { id } = permintaan.permintaan;


// Ambil data pengguna dari API pihak ketiga
const tanggapan = menunggu mengambil(` https://api.example.com/users/${id}`);
const pengguna = menunggu respon.json();
// Mengembalikan data pengguna
 res.status(200.json (pengguna);
}

Contoh ini mendefinisikan titik akhir API yang menggunakan pengenal parameter kueri untuk mengambil data pengguna dari API pihak ketiga. Menggunakan mengambil metode, Anda dapat mengirim permintaan ke API dan kemudian menunggu respons dengan kata kunci menunggu.

Kode kemudian mengekstrak informasi JSON dengan memanggil respon.json() dan menyimpannya dalam variabel. Akhirnya, ia menggunakan json metode respons untuk memformat data respons sebagai JSON.

Pengambilan data fungsi tepi adalah teknik canggih yang memungkinkan Anda mengambil data di tepi, mengurangi beban server dan meningkatkan kinerja aplikasi web.

Anda juga dapat menurunkan kemalasan permintaan dan memberi pengguna halaman yang lebih cepat dan lebih responsif dengan mendapatkan informasi dari antarmuka perangkat lunak pihak ketiga di edge.

3. Digunakan dalam Otentikasi

Dengan menerapkan aturan kontrol akses di edge, Anda dapat meningkatkan keamanan aplikasi web dan mengurangi risiko akses tanpa izin ke data sensitif.

Sebagai contoh, pertimbangkan fungsi yang memeriksa status autentikasi klien dan menggemakannya kembali dalam respons. Berikut garis besar verifikasi yang melibatkan kemampuan Edge di Next.js:

// halaman/api/auth.js
eksporbawaan (req, res) => {
const { isAuthenticated } = req.cookies;
jika (diotentikasi) {
 res.status(200).json({ pesan: 'Anda diautentikasi' });
 } kalau tidak {
 res.status(401).json({ pesan: 'Anda tidak diautentikasi' });
 }
}

Dalam ilustrasi ini, fungsi Edge memeriksa cookie untuk token autentikasi dan, jika ditemukan, menghasilkan respons JSON dengan informasi pengguna.

4. Tes A/B

Cara lain Anda dapat menggunakan fungsi Edge Next.js adalah dengan mengoptimalkan kinerja aplikasi web menggunakan pengujian A/B. Anda dapat membandingkan berbagai versi situs web atau aplikasi menggunakan pengujian A/B untuk menentukan mana yang berkinerja lebih baik.

Ilustrasi bagaimana fungsi Edge Next.js dapat digunakan untuk melakukan pengujian A/B adalah sebagai berikut:

// halaman/api/abtest.js
const varian = ['varianA', 'varianB'];
eksporbawaanfungsipawang(req, res) {
const { userId } = req.query;


// Hasilkan varian acak untuk pengguna
const varianIndeks = Matematika.lantai(Matematika.random() * varian.panjang);
const varian = varian[indeksvarian];


// Simpan varian dalam cookie
 res.setHeader('Set-Cookie', `varian=${varian}; Usia Maks=604800;`);
// Render varian yang sesuai
jika (varian 'varianA') {
 res.status(200).mengirim('Selamat datang di varian A!');
 } kalau tidak {
 res.status(200).mengirim('Selamat datang di varian B!');
 }
}

Kode ini menunjukkan titik akhir antarmuka API yang menjalankan pengujian A/B untuk dua variasi unik halaman situs. Ini menggunakan Matematika.random() metode untuk membuat varian acak bagi pengguna dan menyimpannya dalam cookie dengan res.setHeader metode. Ini memungkinkan kode untuk memastikan klien melihat variasi yang sama pada kunjungan berikutnya.

Kode kemudian menggunakan varian nilai cookie untuk merender varian yang sesuai. Ini menampilkan pesan yang menunjukkan varian mana yang dipilih.

Menggunakan fungsi Edge, pengembang dapat menggunakan alat canggih yang disebut pengujian A/B untuk membandingkan berbagai versi aplikasi atau halaman web untuk melihat mana yang berkinerja lebih baik. Anda dapat mengumpulkan data tentang perilaku pengguna dan meningkatkan kinerja aplikasi web serta pengalaman pengguna dengan menugaskan pengguna secara acak ke berbagai varian.

5. Tanggapan Caching

Penyimpanan reaksi adalah cara lain Anda dapat menggunakan kemampuan Edge di Next.js untuk merampingkan eksekusi web. Ini memungkinkan kami untuk menyimpan reaksi untuk jangka waktu tertentu untuk mengurangi jumlah permintaan yang dibuat ke server dan bekerja pada kecepatan aplikasi web.

Berikut adalah ilustrasi bagaimana Anda dapat melakukan penyimpanan reaksi dengan Kemampuan Edge di Next.js:

// halaman/api/data.js
const data = { nama: 'John Doe', usia: 30 };
eksporbawaanfungsipawang(req, res) {
// Tetapkan tajuk respons untuk mengaktifkan caching
 res.setHeader('Kontrol-Cache', 's-maxage=10, basi-sambil-validasi ulang');
// Mengembalikan data
 res.status(200.json (data);
}

Contoh ini menentukan titik akhir API yang mengembalikan respons JSON dengan beberapa data.

Kami mengatur header reaksi menggunakan res.setHeader teknik untuk mengaktifkan pemesanan selama 10 detik menggunakan s-max-age batas. Ini menunjukkan bahwa CDN dapat meng-cache respons hingga sepuluh detik sebelum memerlukan penyegaran.

Kami juga menggunakan basi-sementara-validasi ulang parameter untuk membiarkan CDN menyajikan respons dalam cache yang telah kedaluwarsa saat balasan baru dibuat di latar belakang. Bahkan jika tanggapan yang di-cache telah kedaluwarsa, CDN akan menghasilkan yang baru dan akan selalu mengirimkan tanggapan.

Caching respons fungsi tepi adalah cara terbaik untuk mempercepat aplikasi web dan mengurangi jumlah permintaan ke server. Anda dapat menjamin pengguna situs web yang lebih cepat dan lebih responsif dengan melakukan caching tanggapan untuk waktu yang telah ditentukan.

Fungsi Tepi Merupakan Fitur yang Sangat Kuat dari Next.js

Dukungan Next.js untuk fungsi Edge adalah fitur menarik yang memungkinkan Anda menjalankan fungsi kustom tanpa server lebih dekat ke pengguna akhir di jaringan edge.

Ada beberapa cara Anda dapat menggunakan fungsi Edge untuk meningkatkan aplikasi web: pengujian A/B, caching respons, perutean dinamis, pengambilan data, autentikasi.

Menggunakan kemampuan Edge dalam arsitektur Anda dapat meningkatkan pengalaman klien Anda dan menghasilkan aplikasi web yang lebih cepat dan lebih responsif.