Pelajari manfaat dan konsekuensi mendukung AMP di aplikasi Next.js Anda
AMP adalah framework komponen web yang menjamin muat halaman yang cepat. Next.js memiliki dukungan bawaan untuk AMP.
Apa yang akan Anda pelajari?
Panduan ini pertama-tama menjelaskan secara singkat cara AMP menjamin pemuatan halaman yang cepat, lalu menjelaskan berbagai cara untuk mendukung AMP di aplikasi Next.js, lalu membantu Anda menentukan pendekatan mana yang terbaik untuk Anda.
Audiens yang dituju untuk panduan ini adalah developer web yang telah memutuskan untuk menggunakan Next.js, tetapi tidak yakin apakah akan mendukung AMP.
Cara AMP menjamin pemuatan halaman yang cepat
AMP memiliki dua strategi utama untuk menjamin kecepatan:
- AMP HTML: Bentuk HTML yang dibatasi yang mewajibkan pengoptimalan tertentu dan melarang pola arsitektur yang menyebabkan kelambatan. Lihat Cara kerja AMP untuk mengetahui ringkasan tingkat tinggi tentang pengoptimalan dan batasan.
- AMP Cache: Cache konten yang digunakan oleh beberapa mesin telusur, seperti Google dan Bing, yang menggunakan pra-rendering untuk mempercepat pemuatan halaman. Lihat Alasan Cache AMP ada untuk mempelajari lebih lanjut manfaat dan kompromi cache serta Bagaimana halaman AMP saya di-cache? untuk memahami cara 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 menyertai halaman Next.js.
- Pendekatan khusus AMP memungkinkan Anda menjadikan AMP sebagai satu-satunya opsi untuk halaman.
Meskipun Next.js biasanya dianggap sebagai framework React, penting untuk memahami bahwa saat menggunakan Next.js untuk menayangkan halaman AMP, Anda tidak dapat lagi menjalankan komponen React sisi klien karena komponen React bukan komponen AMP yang valid. Dengan kata lain, Next.js bukan lagi framework React, tetapi merupakan mesin template sisi server untuk membuat halaman AMP.
Cara memutuskan apakah akan menggunakan pendekatan AMP Hybrid atau khusus AMP
Jika Anda serius dalam meningkatkan performa pemuatan, halaman khusus AMP dapat menjadi cara yang baik untuk memastikan halaman Anda cepat dan tetap cepat. Namun, ada kendalanya: 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 pemblokir render adalah penyebab umum pemuatan halaman yang lambat.
Untuk memahami apakah pendekatan khusus AMP cocok untuk Anda, Anda perlu mengetahui apakah semua kode frontend dapat direpresentasikan dalam AMP HTML:
- Baca Cara kerja AMP untuk memahami batasan arsitektur tingkat tinggi dan pengoptimalan wajib AMP.
- Baca Tag HTML untuk melihat tag HTML yang diizinkan dan dilarang AMP, jelajahi katalog komponen AMP untuk melihat komponen kustom yang telah dibuat komunitas AMP untuk mengatasi kasus penggunaan umum, dan lihat amp-script untuk mempelajari cara menggunakan JavaScript kustom guna menerapkan fitur yang saat ini tidak didukung AMP.
Meskipun pendekatan khusus AMP tidak akan berfungsi untuk halaman Anda, sebaiknya gunakan AMP jika memungkinkan, karena AMP HTML dan AMP Cache dijamin cepat. Pendekatan AMP Hybrid di Next.js menyediakan cara untuk menayangkan halaman AMP secara kondisional. Namun, hal ini juga menimbulkan biaya pemeliharaan yang lebih tinggi karena mengharuskan Anda mempertahankan dua versi setiap halaman.
Kesimpulan
AMP menjamin bahwa situs Anda menjadi cepat dan tetap cepat dengan menerapkan pola yang mengarah ke kecepatan dan melarang pola yang menyebabkan kelambatan. AMP HTML dan Cache AMP adalah dua cara utama AMP untuk menjamin kecepatan. Namun, sebelum mengadopsi AMP, Anda harus memastikan bahwa AMP dapat mendukung semua persyaratan situs Anda.