Pelajari manfaat dan konsekuensi mendukung AMP di aplikasi Next.js Anda
AMP adalah framework komponen web yang meningkatkan waktu pemuatan halaman. Next.js memiliki dukungan bawaan untuk AMP.
Apa yang akan Anda pelajari?
Panduan ini pertama-tama menjelaskan secara singkat cara AMP memastikan 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.
Cara AMP memastikan pemuatan halaman yang cepat
AMP memiliki dua strategi utama untuk menjamin kecepatan:
- AMP HTML: Bentuk HTML terbatas yang mewajibkan pengoptimalan tertentu dan melarang pola arsitektur yang menyebabkan kelambatan. Lihat Cara kerja AMP untuk mengetahui ringkasan umum 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 adanya AMP Cache untuk mempelajari lebih lanjut manfaat dan konsekuensi 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 pendamping untuk halaman Next.js apa pun.
- 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 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 memutuskan apakah akan menggunakan pendekatan AMP Hybrid atau AMP-only
Jika Anda serius dengan performa pemuatan, halaman khusus AMP dapat menjadi cara yang baik untuk memastikan bahwa halaman Anda dimuat dengan cepat dan tetap cepat. Namun, ada satu hal yang perlu diperhatikan: untuk memastikan 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 untuk Anda, Anda perlu mencari tahu apakah semua kode frontend Anda dapat direpresentasikan dalam HTML AMP:
- 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 oleh AMP, jelajahi katalog komponen AMP untuk melihat komponen kustom yang telah dibuat oleh komunitas AMP untuk menyelesaikan kasus penggunaan umum, dan lihat amp-script untuk mempelajari cara menggunakan JavaScript kustom untuk menerapkan fitur yang saat ini tidak didukung oleh AMP.
Meskipun pendekatan khusus AMP tidak akan berfungsi untuk halaman Anda, sebaiknya gunakan AMP jika memungkinkan, karena kecepatan HTML AMP dan AMP Cache. 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 mengharuskan Anda mengelola dua versi untuk setiap halaman.
Kesimpulan
AMP memastikan situs Anda dimuat dengan cepat dan tetap cepat dengan menerapkan pola yang menghasilkan kecepatan dan melarang pola yang menyebabkan kelambatan. HTML AMP dan AMP Cache adalah dua cara utama AMP memastikan kecepatan. Namun, sebelum mengadopsi AMP, Anda harus memastikan bahwa AMP dapat mendukung semua persyaratan situs Anda.