Cara mempercepat aplikasi Next.js dengan pemisahan kode dan strategi pemuatan cerdas.
Apa yang akan Anda pelajari?
Postingan ini menjelaskan berbagai jenis pemisahan kode dan cara menggunakan impor dinamis untuk mempercepat aplikasi Next.js Anda.
Pemisahan kode berbasis rute dan berbasis komponen
Secara default, Next.js membagi JavaScript Anda menjadi potongan-potongan terpisah untuk setiap rute. Saat pengguna memuat aplikasi Anda, Next.js hanya mengirimkan kode yang diperlukan untuk rute awal. Saat menjelajahi aplikasi, pengguna akan mengambil potongan yang terkait dengan rute lainnya. Pemisahan kode berbasis rute meminimalkan jumlah skrip yang perlu diuraikan dan dikompilasi sekaligus, sehingga menghasilkan waktu pemuatan halaman yang lebih cepat.
Meskipun pemisahan kode berbasis rute merupakan setelan default yang baik, Anda dapat lebih mengoptimalkan proses pemuatan dengan pemisahan kode pada level komponen. Jika Anda memiliki komponen besar di aplikasi, sebaiknya pisahkan menjadi bagian-bagian yang terpisah. Dengan begitu, komponen besar apa pun yang tidak penting atau hanya dirender pada interaksi pengguna tertentu (seperti mengklik tombol) dapat dimuat dengan lambat.
Next.js mendukung import()
dinamis,
yang memungkinkan Anda mengimpor modul JavaScript (termasuk komponen React)
secara dinamis dan memuat setiap impor sebagai bagian terpisah. Hal ini akan memberi Anda
pemisahan kode tingkat komponen dan memungkinkan Anda mengontrol pemuatan resource sehingga
pengguna hanya mendownload kode yang mereka butuhkan untuk bagian situs yang
mereka lihat. Di Next.js, komponen ini dirender sisi server (SSR) secara default.
Cara kerja impor dinamis
Postingan ini menyertakan beberapa versi aplikasi contoh yang terdiri dari halaman sederhana dengan satu tombol. Saat mengklik tombolnya, Anda akan melihat anak yang lucu. Saat melalui setiap versi aplikasi, Anda akan melihat perbedaan antara impor dinamis dengan impor statis dan cara menanganinya.
Di versi pertama aplikasi, anak itu tinggal di components/Puppy.js
. Untuk
menampilkan anak di halaman, aplikasi mengimpor komponen Puppy
di
index.js
dengan pernyataan impor statis:
import Puppy from "../components/Puppy";
Untuk melihat cara Next.js memaketkan aplikasi, periksa pelacakan jaringan di DevTools:
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Network
Centang kotak Disable cache.
Muat ulang halaman.
Saat Anda memuat halaman, semua kode yang diperlukan, termasuk komponen
Puppy.js
, dipaketkan dalam index.js
:
Saat Anda menekan tombol Click me, hanya permintaan untuk JPEG puppy yang akan ditambahkan ke tab Network:
Kelemahan dari pendekatan ini adalah meskipun pengguna tidak mengklik tombol untuk
melihat anak anjingnya, mereka harus memuat komponen Puppy
karena disertakan dalam
index.js
. Dalam contoh kecil ini, ini bukan masalah besar, tetapi dalam aplikasi dunia nyata,
sering kali merupakan peningkatan besar untuk memuat komponen besar hanya jika
diperlukan.
Sekarang lihat versi kedua aplikasi, dengan impor statis
diganti dengan impor dinamis. Next.js menyertakan next/dynamic
, yang memungkinkan
penggunaan impor dinamis untuk komponen apa pun di Next:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
Ikuti langkah-langkah dari contoh pertama untuk memeriksa rekaman aktivitas jaringan.
Saat Anda pertama kali memuat aplikasi, hanya index.js
yang didownload. Kali ini ukurannya
0,5 KB lebih kecil (turun dari 37,9 KB menjadi 37,4 KB) karena
tidak menyertakan kode untuk komponen Puppy
:
Komponen Puppy
kini berada dalam potongan terpisah, 1.js
, yang dimuat hanya
saat Anda menekan tombol:
Dalam aplikasi dunia nyata, komponen sering kali jauh lebih besar, dan pemuatan yang lambat tersebut dapat memangkas payload JavaScript awal Anda hingga ratusan kilobyte.
Impor dinamis dengan indikator pemuatan kustom
Saat Anda memuat resource dengan lambat, sebaiknya berikan indikator pemuatan
jika terjadi penundaan. Di Next.js, Anda dapat melakukannya dengan memberikan argumen tambahan ke fungsi dynamic()
:
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
Untuk melihat cara kerja indikator pemuatan, simulasikan koneksi jaringan lambat di DevTools:
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Network
Centang kotak Disable cache.
Di menu drop-down Throttling, pilih Fast 3G.
Tekan tombol Klik saya.
Sekarang, jika Anda mengklik tombol, perlu waktu beberapa saat untuk memuat komponen dan aplikasi menampilkan pesan "Memuat...".
Impor dinamis tanpa SSR
Jika perlu merender komponen hanya di sisi klien (misalnya, widget
chat), Anda dapat melakukannya dengan menyetel opsi ssr
ke false
:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
Kesimpulan
Dengan dukungan untuk impor dinamis, Next.js memberi Anda pemisahan kode tingkat komponen, yang dapat meminimalkan payload JavaScript dan mempercepat waktu pemuatan aplikasi. Semua komponen dirender di sisi server secara default dan Anda dapat menonaktifkan opsi ini jika diperlukan.