Ilustrasi penggunaan Next.js App Router dan Server Components untuk optimasi rendering React.
Posted inPendidikan Tekno

Next.js App Router dan Server Components: Optimasi Rendering Modern di React

Pengembangan aplikasi web React modern membutuhkan kecepatan pemuatan halaman yang maksimal. Banyak pengembang frontend yang telah mengoptimalkan alur kerja antarmuka dengan tailwind css frontend kini beralih ke arsitektur rendering terbaru. Oleh karena itu, penggunaan Next.js App Router menjadi standar baru untuk membangun aplikasi web yang cepat dan ramah mesin pencari.

Sebelumnya, pengembang mengandalkan arsitektur Pages Router. Arsitektur lama ini memproses banyak kode JavaScript langsung di sisi klien (client-side). Jika Anda rajin membaca ulasan teknologi di Ulasankini, peralihan ke App Router memberikan efisiensi yang luar biasa berkat React Server Components (RSC). Oleh sebab itu, mari kita bahas keunggulan dan strategi penerapannya.

Keunggulan React Server Components dalam Next.js App Router

Arsitektur App Router memanfaatkan Server Components secara bawaan (default). Fitur ini memangkas beban eksekusi di peramban pengguna.

Beberapa keunggulan utama dari penggunaan Server Components meliputi:

  • Ukuran Bundle Lebih Kecil: Server mengeksekusi kode library utama. Peramban pengguna hanya menerima hasil render berupa HTML bersih.

  • Akses Data Langsung: Pengembang dapat memanggil data dari database atau API internal secara langsung di dalam komponen.

  • Kinerja SEO Maksimal: Mesin pencari dapat merayapi (crawling) konten halaman secara utuh sejak awal pemuatan.

  • Keamanan Kode Terjaga: Kunci API (API keys) dan logika bisnis sensitif tetap berada di server sehingga tidak akan bocor.

Perbedaan Server Components dan Client Components

Pengembang harus memisahkan peran antara komponen server dan komponen klien. Komponen klien khusus untuk bagian yang membutuhkan interaktivitas pengguna.

Berikut contoh penulisan Server Component untuk mengambil data berita secara langsung:

JavaScript

// Secara bawaan, komponen di folder app adalah Server Component
async function ArticleList() {
  const res = await fetch('https://api.ulasankini.com/posts', { cache: 'no-store' })
  const articles = await res.json()

  return (
    <div class="grid gap-4">
      {articles.map((item) => (
        <article key={item.id} class="p-4 border rounded-lg">
          <h2 class="text-xl font-bold">{item.title}</h2>
          <p>{item.summary}</p>
        </article>
      ))}
    </div>
  )
}

export default ArticleList

Jika komponen membutuhkan event listener seperti onClick atau hook state seperti useState, Anda cukup menambahkan direktif 'use client' di baris paling atas:

JavaScript

'use client'

import { useState } from 'react'

export default function LikeButton() {
  const [likes, setLikes] = useState(0)

  return (
    <button 
      onClick={() => setLikes(likes + 1)}
      class="bg-blue-600 text-white px-4 py-2 rounded"
    >
      Sukai ({likes})
    </button>
  )
}

Strategi Optimasi Rendering Modern di Next.js

Pengembang perlu menerapkan kombinasi fitur caching dan streaming bawaan Next.js untuk hasil maksimal.

Terapkan langkah-langkah praktis berikut saat membangun aplikasi:

  1. Gunakan Streaming dengan Suspense: Bungkus komponen server yang berat menggunakan <Suspense>. Bagian halaman lain dapat muncul lebih cepat tanpa menunggu seluruh data selesai memuat.

  2. Atur Caching dengan Tepat: Tentukan strategi caching pada fungsi fetch(). Anda dapat memilih antara Static Site Generation (SSG) atau Server-Side Rendering (SSR).

  3. Pindahkan Client Components ke Ujung Komponen: Buat komponen client sekecil mungkin. Langkah ini menjaga sebagian besar komponen utama tetap dirender di server.

Kesimpulan

Pemanfaatan Next.js App Router dan Server Components memberikan solusi rendering modern yang tangguh untuk ekosistem React. Pemindahan beban eksekusi ke server menghadirkan aplikasi web dengan waktu muat super cepat. Selain itu, cara ini meningkatkan pengalaman pengguna secara keseluruhan. Oleh karena itu, mulailah menerapkan App Router pada proyek React Anda selanjutnya!

Tags: