Pelajari manfaat dan konsekuensi mendukung AMP di aplikasi Next.js
AMP adalah framework komponen web yang menjamin pemuatan halaman dengan 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, kemudian membantu Anda memutuskan 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 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 ringkasan umum 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 dibuat untuk mempelajari lebih lanjut manfaat dan kekurangan cache dan Bagaimana cara 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 dipahami bahwa saat Anda menggunakan Next.js untuk menayangkan halaman AMP, Anda tidak dapat lagi menjalankan komponen React di sisi klien karena komponen React bukan komponen AMP yang valid. Dengan kata lain, Next.js bukan lagi framework React, melainkan mesin template sisi server untuk membuat halaman AMP.
Cara menentukan apakah akan menggunakan pendekatan Hybrid AMP atau khusus AMP
Jika Anda benar-benar serius dengan performa pemuatan, halaman khusus AMP bisa menjadi cara yang baik untuk memastikan halaman Anda cepat dan tetap cepat. Namun, inilah sebabnya: 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 perenderan merupakan penyebab umum pemuatan halaman yang lambat.
Untuk memahami apakah pendekatan khusus AMP tepat untuk Anda, Anda perlu mencari tahu apakah semua kode frontend Anda dapat direpresentasikan di HTML AMP:
- Baca Cara kerja AMP untuk memahami pembatasan arsitektur tingkat tinggi dan pengoptimalan wajib AMP.
- Baca Tag HTML untuk melihat tag HTML yang diizinkan dan dilarang oleh AMP, jelajahi katalog komponen AMP untuk melihat komponen kustom yang dibuat komunitas AMP untuk mengatasi 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 berfungsi untuk halaman, sebaiknya tetap gunakan AMP jika memungkinkan, karena HTML AMP dan Cache AMP-nya dijamin cepat dan cepat. Pendekatan Hybrid AMP di Next.js memberikan cara untuk menayangkan halaman AMP secara bersyarat. Namun, hal ini juga menimbulkan biaya pemeliharaan yang lebih tinggi karena Anda harus mengelola dua versi untuk setiap halaman.
Kesimpulan
AMP menjamin bahwa situs Anda menjadi cepat dan tetap cepat dengan menerapkan pola yang menyebabkan cepat dan melarang pola yang menyebabkan kelambatan. HTML AMP dan Cache AMP adalah dua cara utama bagi AMP untuk menjamin kecepatan. Namun, sebelum menggunakan AMP, pastikan Anda dapat mendukung semua persyaratan situs Anda terlebih dahulu.