Praktik terbaik untuk meningkatkan kecepatan aplikasi Next.js

Dalam beberapa tahun terakhir, pengembangan aplikasi web telah mengalami transformasi radikal karena munculnya Next.js. Kerangka kerja ini memungkinkan pengembang untuk membangun aplikasi web yang kuat dengan JavaScript tanpa khawatir membangun infrastruktur back-end. Ini menyederhanakan proses pembuatan aplikasi hybrid dengan sisi klien serta halaman yang dirender sisi server. Meskipun kerangkanya sederhana, pengembang masih berjuang untuk meningkatkan kecepatan aplikasi mereka.

Kecepatan aplikasi sangat terkait dengan jumlah waktu yang diperlukan untuk menyajikan kode aplikasi, gaya, dan data ke klien dalam perjalanan pulang pergi pertama. Saat server perlu mengirim aset tambahan (misalnya gambar) selama perjalanan pulang pergi awal, kinerja aplikasi menurun. Untungnya, pengembang dapat mengikuti sejumlah praktik terbaik untuk meningkatkan kecepatan aplikasi Next.js mereka.

Gunakan rendering sisi server

Server-side rendering (SSR) adalah teknik yang digunakan untuk merender HTML awal halaman web di server sebelum mengirimkannya ke browser. Menggunakan rendering sisi server akan membantu aplikasi Anda mengurangi waktu yang diperlukan untuk merender halaman pertama di sisi klien, sehingga pengguna akan melihat konten halaman Anda lebih cepat. SSR juga akan meningkatkan kinerja aplikasi, terutama pada perangkat seluler.

Next.js menyediakan fungsi async bernama getServerSideProps yang dapat kita gunakan untuk merender halaman apa pun di server dan mengembalikan HTML statis ke klien. Anda dapat melakukan pekerjaan pengambilan data di dalam fungsi ini.getServerSideProps fungsi mengambil objek konteks sebagai parameter yang berisi data halaman seperti params, res, req, query, dll. Fungsi ini akan dipanggil oleh server pada setiap permintaan, mengembalikan objek yang akan diteruskan ke komponen halaman sebagai penyangga. Dengan kata lain, fungsi ini memungkinkan Anda mengambil data dari API dan mengembalikan data yang diambil ke komponen halaman sebagai prop.

Contoh: 

// This function will be called by the server export async function getServerSideProps({context}) {     // Fetch data from external API   const data = await fetch(`YOUR_API`)    // Returning the fetched data   return { props: { data } } }  function SSRPage({ data }) {   // Displaying the data to the client   return(     <div>{data}</div>   ) }  export default SSRPage

Dalam contoh di atas, setiap kali pengguna mengunjungi halaman RSK, getServerSideProps() fungsi akan dipanggil oleh server dan akan mengembalikan halaman statis yang dirender sepenuhnya.

Gunakan impor dinamis

Secara tradisional, aplikasi memuat semua komponen dan CSS yang dibutuhkan oleh aplikasi pada pemuatan awal. Impor dinamis memungkinkan Anda untuk membagi kode menjadi potongan-potongan kecil dan memuatnya sesuai permintaan. Dalam konteks aplikasi web, ini berarti Anda dapat mengimpor komponen tertentu sesuai kebutuhan. Jika pengguna tidak pernah berinteraksi dengan komponen tertentu, komponen tersebut tidak akan pernah dimuat. Ini bisa menjadi peningkatan kinerja yang sangat besar, terutama pada perangkat seluler. Ini juga akan mengurangi waktu muat awal dan ukuran bundel aplikasi secara keseluruhan.

Misalnya, jika pengguna belum masuk, Anda dapat dengan malas memuat komponen masuk. Untuk menggunakan impor dinamis, Anda hanya perlu mengimpor kode menggunakan impor dinamis ES2020. 

import dynamic from 'next/dynamic'import SimpleButton from '../components/Buttons' const DynamicComponent = dynamic(() => import('../components/LoginButton'))  function Program() {   return (     <div>       <SimpleButton />       <DynamicComponent />     </div>   ) }  export default Program

Dalam kode di atas, kami menggunakan komponen dinamis yang disediakan oleh kerangka kerja untuk memuat tombol login kami secara dinamis. Anda dapat memberikan nama komponen, larik nama modul, dan fungsi di dalam komponen yang akan dipanggil saat modul dimuat.

Cache konten yang sering digunakan

Caching meningkatkan waktu respons dan mengurangi penggunaan bandwidth dengan menyajikan konten dari cache, bukan dari sumber aslinya. Next.js memiliki caching bawaan sehingga halaman dimuat lebih cepat. Untuk mengimplementasikan caching di aplikasi Next.js, Anda dapat mengatur header secara manual pada rute API apa pun yang mengambil konten dan properti yang dirender sisi server untuk digunakan Cache-Control. Di bawah ini adalah implementasi untuk caching bawaan.

Untuk rute API: 

export default function handler(req, res) {        res.setHeader('Cache-Control', 's-maxage=10');  }

Untuk rendering sisi server: 

export async function getServerSideProps({ req, res }) {     res.setHeader(       'Cache-Control',       'public, s-maxage=10, stale-while-revalidate=59'     )     return {         props: {},     } }

Untuk file dan aset statis, Anda tidak perlu menambahkan caching secara manual; Next.js secara otomatis menambahkannya.

Hapus dependensi yang tidak digunakan

Banyak aplikasi bergantung pada paket pihak ketiga. Meskipun dependensi jelas bagus untuk aplikasi Anda, dependensi meningkatkan ukuran dan waktu pemuatannya. Jika Anda menggunakan paket npm di aplikasi Next.js Anda, Anda harus memperhatikan dependensi yang tidak digunakan. Mereka mengambil ruang di bundel terakhir Anda dan mungkin menyebabkan perilaku yang tidak terduga dalam aplikasi Anda.

Jika Anda memiliki proyek kecil, Anda dapat dengan mudah menemukan dependensi yang tidak digunakan dan menghapusnya dari package.json file aplikasi Next.js Anda. Tetapi jika Anda memiliki proyek besar dengan banyak dependensi yang berbeda, mungkin sulit untuk menemukan dependensi yang tidak digunakan. Dalam hal ini, gunakan depcheck paket untuk menemukan dependensi yang tidak digunakan dalam proyek Anda (paket ini disertakan dengan npm).

Saya menyarankan Anda menghapus dependensi satu per satu dan memulai ulang aplikasi Anda setelah setiap penghapusan untuk memastikan bahwa dependensi benar-benar tidak diperlukan dan Anda tidak merusak aplikasi Anda.

Optimalkan gambar

Optimalisasi gambar melibatkan pengurangan ukuran file gambar. Karena gambar adalah salah satu aset terbesar yang membebani kinerja aplikasi Anda, mengurangi ukuran file gambar dapat meningkatkan kinerja. Ini adalah proses dua langkah: 1) mengubah ukuran gambar ke ukuran yang lebih kecil dan 2) menyimpannya dalam format yang benar (jpeg lebih baik untuk foto; png lebih baik untuk grafik).

Next.js menyediakan bawaan next/image komponen yang dapat kita gunakan sebagai pengganti native <img> komponen. 

import Image from 'next/image'  function OptimizedImage() {   return (     <>       <h1>Next.js Image</h1>       <Image         src={image_url}         alt="Any Text"         width={500}         height={500}         blurDataURL="         placeholder="blur"       />     </>   ) } export default OptimizedImage

Sekarang mari kita lihat manfaat dari next/image komponen.

Pemuatan lambat:

Pemuatan lambat adalah proses memuat bagian tertentu dari aplikasi hanya jika terlihat di area pandang klien. Secara default, next/image komponen malas memuat gambar, yang akan mengurangi waktu pemuatan. Jika Anda tidak ingin malas memuat gambar, atur priority={true} untuk mematikannya.

Gambar tempat penampung:

Menggunakan next/image komponen, Anda dapat menambahkan placeholder kabur untuk gambar apa pun menggunakan placeholder menopang.

Pramuat gambar:

Jika Anda memiliki banyak gambar dalam satu halaman, Anda dapat memprioritaskan pemuatan menggunakan next/image komponen.

Optimalkan skrip Anda

Selain dependensi npm, banyak aplikasi menggunakan skrip pihak ketiga seperti Google Analytics, Google AdSense, dan Bootstrap. Skrip ini selanjutnya dapat memperlambat aplikasi Next.js Anda. Alih-alih menggunakan default <script> tag, Anda dapat menggunakan next/script komponen Next.js. Ini memungkinkan Anda untuk mengatur prioritas pemuatan untuk skrip pihak ketiga.

Sebagai contoh: 

import Script from 'next/script'  export default function OptimizedScript() {   return (     <>       <Script         id="YOUR_ID"         src="         onError={(err) => {           console.error('Error', err)         }}         onLoad={() => {           // Function to perform after loading the script         }}       />     </>   ) }

Dengan menetapkan nilai strategy menopang di next/script komponen, Anda dapat menggunakan tiga pendekatan pemuatan skrip yang berbeda:

  • afterInteractive: Script akan dimuat di sisi klien setelah halaman menjadi interaktif.
  • beforeInteractive: Skrip akan dimuat di sisi server sebelum JavaScript yang dibundel sendiri dijalankan.
  • lazyOnload: Script akan dimuat setelah semua sumber daya lainnya dimuat.

Setelah menerapkan salah satu strategi ini, periksa kecepatan dan kinerja aplikasi Anda menggunakan alat kinerja web seperti Google pagespeed. Alat kinerja web dapat memberikan informasi berharga tentang kinerja aplikasi, seperti:

  • Waktu yang dibutuhkan untuk mendapatkan halaman awal.
  • Waktu yang dibutuhkan untuk mendapatkan sumber daya awal.
  • Jumlah perjalanan pulang pergi yang ditransmisikan.
  • Jumlah data yang ditransfer setiap perjalanan.

Mulai membuat aplikasi Next.js lebih cepat

Next.js telah menjadi populer karena memungkinkan pengembang untuk membangun aplikasi JavaScript yang kuat tanpa harus membangun infrastruktur back-end, tetapi juga penuh dengan fitur yang dapat membantu Anda meningkatkan kinerja aplikasi sambil melakukan banyak pekerjaan berat di server. Mengikuti praktik terbaik ini akan membantu Anda memanfaatkan fitur tersebut sehingga Anda dapat mulai membuat aplikasi Next.js lebih cepat.

Tags: next.js, kinerja, rendering sisi server