Jika Anda menggunakan aplikasi web atau seluler, Anda mungkin pernah melihat layar kerangka. Perangkat UI ini memberikan pengalaman yang lebih mulus saat pembaruan bergantung pada penerimaan data, yang mungkin membutuhkan waktu lama untuk sampai.

Cari tahu apa sebenarnya layar kerangka itu, mengapa Anda mungkin ingin menggunakannya di aplikasi Anda, dan cara menerapkannya di Next.js.

Apa itu Skeleton Screen?

Layar kerangka adalah elemen UI yang menunjukkan bahwa ada sesuatu yang sedang dimuat. Biasanya status komponen UI kosong atau "kosong", tanpa data apa pun. Misalnya, jika Anda memuat daftar item dari database, layar kerangka mungkin berupa daftar sederhana tanpa data, hanya elemen kotak placeholder.

Banyak situs web dan aplikasi menggunakan layar kerangka. Beberapa menggunakannya untuk status pemuatan, sementara yang lain menggunakannya sebagai cara untuk meningkatkan kinerja yang dirasakan.

Mengapa Menggunakan Skeleton Screen?

Ada beberapa alasan mengapa Anda mungkin ingin menggunakan layar kerangka di aplikasi Next.js Anda.

Pertama, ini dapat meningkatkan kinerja yang dirasakan dari aplikasi Anda. Jika pengguna melihat layar kosong saat data sedang dimuat, mereka mungkin berasumsi bahwa aplikasi lambat atau tidak berfungsi dengan baik. Namun, jika mereka melihat layar kerangka, mereka tahu bahwa data sedang dimuat dan aplikasi berfungsi seperti yang diharapkan.

Kedua, layar kerangka dapat membantu mengurangi "jank" atau kemacetan di UI Anda. Jika data dimuat secara asinkron, UI bisa diperbarui secara bertahap saat aplikasi Anda menerima data. Ini dapat membuat pengalaman pengguna lebih lancar.

Ketiga, layar kerangka dapat memberikan pengalaman pengguna yang lebih baik jika data dimuat dari koneksi yang lambat atau tidak dapat diandalkan. Jika data diambil dari server jarak jauh, ada kemungkinan koneksi menjadi lambat atau terputus. Dalam kasus ini, akan sangat membantu untuk menampilkan layar kerangka sehingga pengguna mengetahui bahwa data sedang dimuat, meskipun perlu beberapa saat.

Cara Mengimplementasikan Skeleton Screen di Next.js

Ada beberapa cara untuk mengimplementasikan layar kerangka di Next.js. Anda dapat menggunakan fitur bawaan untuk membuat ulang layar kerangka sederhana secara manual. Atau Anda dapat menggunakan perpustakaan seperti reaksi-loading-skeleton atau Material UI untuk melakukan pekerjaan untuk Anda.

Metode 1: Menggunakan Fitur Bawaan

Di Next.js, Anda dapat menggunakan kait Bereaksi yang berbeda dan kondisi sederhana untuk menampilkan layar kerangka. Anda dapat menggunakan && prop untuk merender layar kerangka secara kondisional.

impor {useState, useEffect} dari 'reaksi';
fungsiKomponen Saya() {
const [isLoading, setIsLoading] = useState(BENAR);


gunakanEfek(() => {
 setTimeout(() => setIsLoading(PALSU), 1000);
 }, []);


kembali (
<div>
 {isLoading && (
<div>
 Memuat...
</div>
 )}
 {!isLoading && (
<div>
 Konten komponen saya.
</div>
 )}
</div>
 );
}
eksporbawaan Komponen Saya;

Kode di atas menggunakan useState kait untuk melacak apakah data sedang dimuat (sedang Memuat). Ini menggunakan useEffect hook untuk mensimulasikan pemuatan data secara asinkron. Akhirnya, ia menggunakan && operator untuk merender layar kerangka atau konten komponen secara bersyarat.

Cara ini tidak ideal, karena memerlukan pengaturan secara manual sedang Memuat menyatakan dan mensimulasikan pemuatan data. Namun, ini adalah cara sederhana untuk mengimplementasikan layar kerangka di Next.js.

Metode 2: Menggunakan Perpustakaan Seperti 'React-Loading-Skeleton'

Cara lain untuk mengimplementasikan layar kerangka adalah dengan menggunakan perpustakaan seperti reaksi-loading-skeleton. react-loading-skeleton adalah komponen React yang dapat Anda gunakan untuk membuat layar kerangka. Ini memiliki komponen yang dapat Anda bungkus di sekitar elemen UI apa pun.

Untuk menggunakan react-loading-skeleton, Anda perlu menginstalnya menggunakan npm.

npm saya bereaksi-memuat-kerangka

Setelah diinstal, Anda dapat mengimpornya ke aplikasi Next.js dan menggunakannya seperti ini:

impor Reaksi dari 'reaksi';
impor Kerangka dari 'react-loading-skeleton';
impor 'react-loading-skeleton/dist/skeleton.css'
const Aplikasi = () => {
kembali (
<div>
<Kerangka />
<h3>Layar Kedua</h3>
<Tinggi kerangka={40} />
</div>
 );
};
eksporbawaan Aplikasi;

Kode di atas mengimpor file Kerangka komponen dari pustaka react-loading-skeleton. Kemudian menggunakannya untuk membuat dua layar kerangka. Ini menggunakan tinggi prop untuk mengatur ketinggian layar kerangka. Sekarang kamu bisa menggunakan rendering bersyarat untuk merender komponen hanya ketika data ada.

Metode 3: Menggunakan Material UI

Jika Anda menggunakan Material UI di aplikasi Next.js, Anda dapat menggunakan komponen dari @mui/materi perpustakaan. Itu komponen dari Material UI memiliki beberapa alat peraga yang dapat Anda gunakan untuk menyesuaikan layar kerangka.

Untuk menggunakan komponen dari Material UI, Anda harus menginstalnya terlebih dahulu menggunakan npm:

instal npm @mui/material

Setelah diinstal, Anda dapat mengimpornya ke aplikasi Next.js dan menggunakannya seperti ini:

impor Reaksi dari 'reaksi';
impor Kerangka dari '@mui/material/Kerangka';
const Aplikasi = () => {
kembali (
<div>
<Varian rangka="lurus" lebar={210} tinggi={118} />
<h3>Layar Kedua</h3>
<Varian rangka="teks" />
</div>
 );
};
eksporbawaan Aplikasi;

Kode di atas mengimpor file Kerangka komponen dari @material-ui/lab perpustakaan. Itu kemudian membuat dua layar kerangka. Itu varian prop mengatur jenis layar kerangka. Itu lebar Dan tinggi alat peraga menentukan dimensi layar kerangka.

Anda juga dapat menambahkan animasi berbeda ke layar kerangka Anda. Material UI memiliki beberapa animasi bawaan yang dapat Anda gunakan. Misalnya, Anda dapat menggunakan menghidupkan prop untuk menambahkan animasi memudar ke layar kerangka Anda:

impor Reaksi dari 'reaksi';
impor Kerangka dari '@mui/material/Kerangka';
const Aplikasi = () => {
kembali (
<div>
<Varian rangka="lurus" lebar={210} tinggi={118} />
<h3>Layar Kedua</h3>
<Varian rangka="teks" menghidupkan="melambai" />
</div>
 );
};
eksporbawaan Aplikasi;

Dengan menambahkan menghidupkan menopang ke a komponen, Anda dapat menggabungkan gerakan visual di antarmuka pengguna Anda. Itu melambai nilai menambahkan animasi melambai ke layar kerangka. Sekarang Anda dapat menggunakan perenderan bersyarat untuk menampilkan konten setelah layar kerangka.

Tingkatkan Pengalaman Pengguna Dengan Skeleton Screens

Layar kerangka bisa menjadi cara yang bagus untuk meningkatkan pengalaman pengguna aplikasi Next.js Anda. Mereka dapat meningkatkan kecepatan yang dirasakan, mengurangi jank, dan menawarkan pengalaman yang lebih baik saat data berjalan melalui koneksi yang lambat atau tidak stabil.

Metode apa pun yang Anda pilih untuk menambahkan layar kerangka, itu adalah cara yang bagus untuk meningkatkan pengalaman pengguna aplikasi Next.js Anda.