Mengoptimalkan Performa Next.js 15 & Video Streaming Multi-Server Player

Mengembangkan platform streaming media sinematik seperti ForgeFlix menuntut standar tinggi pada performa antarmuka pengguna (UI/UX). Pengunjung mengharapkan poster film termuat secara instan, carousel halaman utama beranimasi mulus, serta pemutar video yang siap menonton tanpa buffering atau tautan terputus.

Dalam artikel ini, kami membagikan teknik optimasi frontend yang diterapkan pada ForgeFlix menggunakan Next.js 15, Tailwind CSS, dan React Server Components.

1. Pemisahan React Server Components (RSC) vs Client Components

Di Next.js 15 App Router, secara default semua komponen diproses di sisi server. Kami memanfaatkannya untuk memisahkan logika:

• Server Components (RSC): Digunakan untuk mengambil metadata film dari TMDB, daftar episode, dan informasi sutradara langsung dari database/cache Redis. Ini menghilangkan pengiriman bundel JavaScript yang tidak perlu ke browser.
• Client Components ('use client'): Digunakan secara terisolasi hanya pada bagian interaktif, seperti pemutar video, tombol Matikan Lampu, modal pencarian live, dan form komentar.

// Server Component (movie/[slug]/page.tsx)
import { getMovieDetails } from '@/lib/api';
import MovieDetailClient from '@/components/media/MovieDetailClient';

export default async function MovieDetailPage({ params }: { params: { slug: string } }) {
  // Pengambilan data langsung di server (zero client JS overhead)
  const movie = await getMovieDetails(params.slug);

  return (
    

      
    
  );
}

2. Multi-Server Embedded Player & Mode "Matikan Lampu"

Untuk memastikan video dapat diputar tanpa kendala server down, ForgeFlix menyediakan 4 provider server embed:

1. VidSrc Pro (Default Primary)
2. VidSrc IC (Secondary Fallback)
3. SuperEmbed (Fast Mirror)
4. EmbedSu (Backup Server)

Implementasi Mode Matikan Lampu (Dimmer Overlay)

Pengalaman menonton bioskop diperkuat dengan tombol Matikan Lampu yang menggelapkan seluruh elemen web hingga 92% opacity, menyisakan area video player agar tetap fokus:

// Component LightSwitchOverlay.tsx
'use client';
import { useState } from 'react';

export function VideoPlayerArea({ embedUrl }: { embedUrl: string }) {
  const [isLightsOff, setIsLightsOff] = useState(false);

  return (
    

      {/* Overlay Dimmer */}
      {isLightsOff && (
        
 setIsLightsOff(false)}
        />
      )}

      {/* Frame Player dengan Z-Index Tinggi */}