Pelajari manfaat dan kekurangan mendukung AMP di aplikasi Next.js Anda
AMP adalah framework komponen web yang menjamin pemuatan halaman yang cepat. Next.js memiliki dukungan bawaan untuk AMP.
Apa yang akan Anda pelajari?
Panduan ini terlebih dahulu menjelaskan cara AMP menjamin pemuatan halaman yang cepat, lalu menjelaskan berbagai cara untuk mendukung AMP di aplikasi Next.js, lalu membantu Anda memutuskan pendekatan mana yang terbaik untuk Anda.
Audiens yang dituju panduan ini adalah developer web yang telah memutuskan untuk menggunakan Next.js, tetapi tidak yakin apakah akan mendukung AMP atau tidak.
Cara AMP menjamin pemuatan halaman yang cepat
AMP memiliki dua strategi utama untuk menjamin kecepatan:
- HTML AMP: Bentuk HTML terbatas yang mewajibkan pengoptimalan tertentu dan melarang pola arsitektur yang menyebabkan kelambatan. Lihat Cara kerja AMP untuk mendapatkan ringkasan tingkat tinggi tentang pengoptimalan dan pembatasan.
- Cache AMP: Cache konten yang digunakan oleh beberapa mesin telusur, seperti Google dan Bing, yang menggunakan pra-rendering untuk mempercepat pemuatan halaman. Lihat Mengapa Cache AMP ada untuk mempelajari lebih lanjut manfaat dan kekurangan dari cache tersebut serta Bagaimana cara halaman AMP saya di-cache? untuk memahami bagaimana halaman AMP Anda masuk ke cache.
Cara menggunakan AMP di Next.js
Ada dua cara untuk menggunakan AMP di Next.js:
- Pendekatan AMP Hybrid memungkinkan Anda membuat versi AMP yang menyertainya dari halaman Next.js mana pun.
- Pendekatan khusus AMP memungkinkan Anda menjadikan AMP sebagai satu-satunya opsi untuk sebuah halaman.
Meskipun Next.js biasanya dianggap sebagai framework React, penting untuk dipahami bahwa saat menggunakan Next.js untuk menayangkan halaman AMP, Anda tidak dapat lagi menjalankan komponen React di sisi klien karena komponen React bukanlah komponen AMP yang valid. Dengan kata lain, Next.js bukan lagi framework React, melainkan mesin template sisi server untuk membuat halaman AMP.
Cara memutuskan apakah akan menggunakan pendekatan AMP Hybrid atau khusus AMP
Jika Anda serius tentang performa pemuatan, halaman khusus AMP dapat menjadi cara yang tepat untuk memastikan halaman Anda menjadi cepat dan tetap cepat. Namun, inilah intinya: untuk menjamin kecepatan, AMP melarang pola arsitektur dan elemen HTML tertentu yang sering menyebabkan halaman lambat. Misalnya, AMP tidak mengizinkan JavaScript sinkron kustom karena resource yang memblokir rendering adalah penyebab umum pemuatan halaman yang lambat.
Untuk memahami apakah pendekatan khusus AMP tepat bagi Anda, Anda harus mencari tahu apakah semua kode frontend dapat ditampilkan di HTML AMP:
- Baca Cara kerja AMP untuk memahami pembatasan arsitektur tingkat tinggi dan pengoptimalan wajib AMP.
- Baca Tag HTML untuk melihat tag HTML apa saja yang diizinkan dan dilarang oleh AMP, jelajahi katalog komponen AMP untuk melihat komponen kustom yang telah dibuat oleh komunitas AMP untuk menyelesaikan berbagai kasus penggunaan umum, dan lihat amp-script untuk mempelajari cara menggunakan JavaScript kustom untuk menerapkan fitur yang saat ini tidak didukung AMP.
Meskipun pendekatan khusus AMP tidak akan berhasil untuk halaman Anda, sebaiknya gunakan AMP jika memungkinkan, karena kecepatan HTML AMP dan Cache AMP terjamin. Pendekatan AMP Hybrid di Next.js menyediakan cara untuk menayangkan halaman AMP secara bersyarat. Namun, hal ini juga menimbulkan biaya pemeliharaan yang lebih tinggi karena Anda harus mengelola dua versi dari setiap halaman.
Kesimpulan
AMP menjamin situs Anda menjadi cepat dan tetap cepat dengan menerapkan pola yang menyebabkan kecepatan dan melarang pola yang menyebabkan kelambatan. HTML AMP dan Cache AMP adalah dua cara utama yang dijamin oleh AMP untuk meningkatkan kecepatan. Namun, sebelum mengadopsi AMP, Anda harus memastikan bahwa AMP tersebut dapat mendukung semua persyaratan situs Anda.