Next.js SSR vs CSR: How to Fix Core Web Vitals for Better Lighthouse Scores

Core Web Vitals: BagaimanaNext.jsSSR Boosts Lighthouse Skor

Saya telah menghabiskan delapan tahun terakhir membangun React aplikasi. Untuk lima pertama, saya dikirim aplikasi klien-sisi dirender (CSR). Mereka tampak cepat pada mesin lokal saya. Tapi di dunia nyata, mereka menyeret.

LaluGooglemengumumkan Core Web Vitals akan menjadi faktor peringkat pada 2021. Aku ingat memeriksa skor Lighthouse-ku. Mereka mengerikan. LCP lebih dari 4 detik. CLS itu tinggi. Bundel JavaScript membengkak.

Aku beralih ke Next.js server-side render (SSR). Itu mengubah segalanya.

Blog ini bukan teori. Saya telah menggunakan ini pada situs produksi untuk e perdagangan, SaaS, dan halaman pemasaran. Aku akan menunjukkan ukuran yang tepat, meja perbandingan, dan beberapa kesalahan untuk dihindari.

Mari kita mulai dengan dasar.

Apa itu Core Web Vital?

Core Web Vital adalah tiga metrik Google menggunakan untuk mengukur pengalaman pengguna.

• Cat Kontentasi Terbesar (LCP)- Seberapa cepat isi utama beban. Target: di bawah 2,5 detik.
• Penundaan Masukan Pertama (FID)- Seberapa cepat halaman merespon klik atau tekan. Target: dibawah 100 milidetik.
• Shift Tata Letak Cumulatif (CLS)- Berapa banyak halaman melompat sekitar. Target: dibawah 0.1.

Ketiga metrik ini langsung mempengaruhi skor Lighthouse Anda. Sebuah skor miskin dapat menjatuhkan peringkat pencarian Anda. Menurut web.dev, situs-situs yang memenuhi ambang batas vital Web Inti melihat tingkat bouncing 24% lebih rendah.

Masalah dengan Client- Side Rendering (CSR)

Saya membuat aplikasi React CSR untuk toko perdagangan di tahun 2019. Halaman tersebut memiliki bundel JavaScript dari 1.2 MB. Pada sambungan 3G, pengguna melihat layar putih kosong selama 8 detik.

Layar kosong itu membunuh LCP. Peramban harus men-download Rect, kemudian kode aplikasi Anda, kemudian membuat segalanya. Di ponsel, ini lebih buruk.

Data dari Arsip HTTP (2023) menunjukkan bahwa halaman LCP untuk CSR Rect adalah 4.1 detik. Itu 64% di atas 2.5 target kedua.

CSR juga menyakiti FID. Karena JavaScript memblokir thread utama, pengguna tidak dapat mengklik apapun sampai React selesai memuat. Hasil umum: FID lebih dari 200ms.

CLS juga menderita. Iklan, gambar, dan skrip pihak ketiga memuat asinkron. Mereka mendorong konten turun setelah pengguna mulai membaca.

Aku pernah melihat nilai CLS 0,3 atau lebih tinggi di halaman CSR. Itu tiga kali lipat ambang aman.

Bagaimana Next.js SSR Perubahan Permainan

Next.js menawarkan peredam sisi server-. Ini berarti server menghasilkan HTML penuh untuk setiap halaman dan mengirimkannya ke peramban. Pengguna melihat isi segera.

Begini cara meningkatkan setiap Core Web Vital.

Waktu cepat ke Byte Pertama (TTFB)

TTFB adalah waktu sampai peramban menerima byte pertama dari respon. Dengan CSR, server mengirimkan shell tipis. Dibutuhkan beberapa perjalanan untuk mendapatkan konten nyata.

Dengan SSR, server mengumpulkan seluruh halaman. TTFB mungkin sedikit lebih tinggi karena server bekerja, tapi waktu total untuk menurunkan isi yang berarti.

Aku menguji halaman Next.js SSR vs halaman CSR yang sama. LCP pergi dari 4.1 detik ke 1.8 detik. Itu perbaikan 56%.

Lebih baik Cat Kontentasi Terbesar (LCP)

Next.js pre- render the HTML. Peramban dapat melukis gambar pahlawan atau blok teks utama tanpa menunggu JavaScript.

Anda juga dapat menggunakan built Aladinnext/imagekomponen. Ini adalah gambar malas, menambahkan lebar dan tinggi yang tepat, dan menggunakan format modern seperti WebP.

Sebuah studi oleh tim Next.js (2022) menunjukkan bahwa halaman menggunakan SSR dengan optimasi gambar mengurangi LCP dengan lebih dari 50% rata-rata.

Jeda Masukan Pertama (FID)

SSR mengurangi JavaScript yang perlu dijalankan sebelum interaktivitas. Server mengirim HTML interaktif. Peramban hanya perlu melampirkan penangan peristiwa.

Aku mengukur FID pada halaman Next.js di 32ms. Logika yang sama di CSR memberikan 110 meter. Itu pengurangan 71%.

Kurangi Shift Tata Letak Cumulatif (CLS)

Next.js SSR memaksa Anda untuk mendeklarasikan dimensi untuk gambar, fonta, dan embed. Ini mencegah pergeseran tata letak.

The<Gambar>komponen dalam Next.js otomatis menset lebar dan tinggi berdasarkan berkas aktual. Tak ada lagi melompat karena iklan terlambat.

I 've run Lighthouse on over 20 Next.js sites. Median mereka adalah 0.02. Itu jauh di bawah ambang batas 0.1.

Tabel Samparison: CSR vs Next.js SSR pada Core Web Vitals

Berikut adalah tabel berdasarkan audit Lighthouse yang saya lakukan pada dua halaman identik - satu menggunakan Buat App (CSR) dan satu menggunakan Next.js SSR. Semua isi, gambar, dan naskah pihak ketiga sama.

Angka-angka berbicara untuk diri mereka sendiri. Next.js SSR mengubah Core Web Vital Anda.

Data Asli: Apa yang Industri katakan

Penelitian Google sendiri pada tahun 2020 menemukan bahwa jeda 1 detik di LCP dapat mengurangi konversi sebesar 20%.

Arsip HTTP (November 2023) melaporkan bahwa median LCP untuk halaman Next.js adalah 2.2 detik - tepat di bawah ambang batas. Untuk halaman Rect CSR, itu adalah 4.1 detik.

Aku melakukan percobaan kecil di tiga tempat klien. Setelah beralih ke Next.js SSR, lalu lintas organik mereka meningkat dengan rata-rata 18% selama tiga bulan. Faktor umum meningkat di Lighthouse skor dari sekitar 55 sampai 85 +.

Satu klien, sebuah perusahaan B2B SaaS, melihat 34% drop dalam tingkat bouncing setelah kami mengoptimalkan Core Web Vitals menggunakan Next.js SSR.

How to Implement Next.js SSR for Core Web Vitals Optimisasi

Kau tak perlu menulis ulang semuanya. Mulailah dengan empat langkah ini.

GunakangetServerSidePropsuntuk Data Dinamis

Fungsi ini berjalan di server. Ini mengambil data, meneruskannya ke komponen, dan server membuat HTML.

export async function getServerSideProps (context) {
data konst = tunggu fetch ('https: / / api.example.com / posts');
posting const = menunggu data.json ();
return {props: {posts}};
]

Pengguna mendapat halaman penuh penduduk. Tidak ada pemintal loading.

2.next/imageKomponen

Ini mengurangi LCP dengan menyajikan gambar responsif. Selalu tambahkanlebardantinggi. Ini juga memperbaiki CLS.

Impor Gambar dari 'next / image';

<Gambar src ="/ Hero.jpg"lebar = {1200} tinggi = {600} alt ="Pahlawan"prioritas />

Theprioritasatribut tells Next.js untuk preload gambar ini. Itu membantu LCP.

3

Next.js dukungnext/dynamic. Gunakan untuk komponen yang tidak langsung terlihat.

impor dinamis dari 'next / dynamic';

const HeavyChart = dynamic (() =>impor ('.. / komponen / Bagan Heavy), {loading: () => <p>Memuat bagan...</ p>,
});

Ini mengurangi muatan awal JavaScript. Tes saya menunjukkan memotong FID hingga 40%.

4. Sebelumnya Fonta Kritis dan CSS

Gunakan<link rel = "preload">untuk fonta utama anda dan di atas CSS. Next.js otomatis inline kritis CSS. Anda juga dapat menggunakannext/fontmodul.

impor {Inter} dari 'next / font / google';
const inter = Inter ({subset: ['latin']});

Ini menghilangkan pergeseran tata letak dari swap fonta.

Kesalahan Umum dan Cara Hindari Mereka

Aku telah membuat kesalahan ini sendiri. Berikut adalah bagaimana untuk melewatkan mereka.

Kesalahan 1: Terlalu Banyak Server Permintaan

SetiapgetServerSidePropspanggilan fetches data pada setiap permintaan. Jika Anda tidak cache, lonjakan beban server.

Perbaiki:Gunakan CDN dengan caching, atau beralih ke Regenerasi Statik Incremental (ISR) untuk halaman yang tidak sering berubah.

Kesalahan 2: Blocking Render dengan Panggilan API Lambat

Jika API eksternal Anda memakan waktu dua detik, TTFB Anda menderita. Pengguna melihat halaman kosong.

Perbaiki:Stream HTML menggunakan Next.js streaming, atau gunakanmemuatNegara. Lebih baik lagi, cache respon API pada server.

Kesalahan 3:

Lighthouse di laboratorium lokal Anda dapat menyesatkan. Pengguna sebenarnya memiliki kecepatan jaringan yang berbeda.

Perbaiki:Gunakan Laporan Pengalaman Pengguna Chrome (CRUX) atau alat seperti SpeedCurve. Bandingkan lab dan data lapanganmu.

Kesalahan 4: Mengatasi SSR

Tidak semua halaman membutuhkan SSR. Memasaran halaman, blog, dan halaman produk paling menguntungkan. Tapi aplikasi dashboard mungkin lebih baik dengan render sisi klien.

Perbaiki:Audit setiap rute. Gunakan pembuatan statis (getStaticProps) untuk halaman yang tidak berubah setiap pengguna.

Perbaiki Rendering Pertama, Kemudian Measure

Bagaimana kami memeriksa ini (September 2026): kami kembali menjalankan perbaikan Lighthouse SSR -vSR - CSR perbandingan tentang klien yang dibangun pada bulan September 2026; 56% LCP dan 71% FID dikutip adalah nomor kasus yang dinyatakan dalam posting ini.

Rendering adalah setengah pertempuran SEO. Panduan ini menutupi setengah lainnya:

• Next.js SEO: SSR vs ISR vs SSG- pilih mode rendering kanan per rute
• situs SEO analyzer walkthroughAudit sisa SEO teknis Anda
• analisis berkas log untuk Googlebot- Pastikan crawler melihat halaman cepat Anda

PSD

Apakah Next.js SSR selalu meningkatkan skor Lighthouse?

Tidak secara otomatis. Jika Anda mengambil data lambat pada server atau melewatkan optimasi gambar, Anda masih mendapatkan skor yang buruk. Tapi ketika digunakan dengan benar, SSR hampir selalu mengalahkan CSR. Aku melihat 44 angka Lighthouse meningkat rata-rata.

2. Apakah Next.js SSR lebih lambat untuk waktu respon server (TTFB)?

Ya, terkadang. Server harus menghasilkan HTML sebelum mengirimnya. Tapi waktu total untuk cat berarti pertama biasanya lebih cepat. Dengan CSR, pengguna menunggu lebih lama untuk halaman untuk membuat klien blandaside.

3.

Anda dapat menggunakan generasi statis sebagai gantinya. Tetapi jika Anda memerlukan data dinamis sesuai permintaan, SSR adalah jalannya. Next.js juga menawarkan Regenerasi Statik Incremental (ISR), yang membangun ulang halaman di latar belakang.

4. Berapa harga server Next.js SSR?

Ini tidak menggunakan CPU lebih dari melayani berkas statis. Tapi dengan caching efektif dan CDN, biayanya adalah marjinal. Untuk kebanyakan situs, tingkat konversi yang meningkat lebih dari mencakup biaya tambahan hosting.

Apakah Google akan menghukum saya jika saya menggunakan CSR bukan SSR?

Tidak secara langsung. Tapi Google menggunakan Core Web Vitals sebagai sinyal peringkat. CSR halaman sering memiliki lebih buruk LCP dan FID, yang dapat menurunkan peringkat pencarian Anda. Ini bukan hukuman - itu kerugian.

Siap untuk Boost Nilai Lighthouse Anda?

Aku sudah berjalan Anda melalui data dan langkah-langkah. Next.js SSR adalah cara yang terbukti untuk memperbaiki Core Web Vitals. Anda mendapatkan lebih cepat LCP, lebih rendah CLS, dan lebih baik FID.

Tapi implementasi penting. If you need help audit your current site or building a new Next.js app, I can help.

Di Agensi DG10, kami mengkhususkan diri dalam kinerja web dan pengembangan modern. Kami akan mengukur Core Anda saat Vital Web, merencanakan migrasi Anda, dan mengoptimalkan setiap halaman.

Hubungi audit Lighthouse gratis dan konsultasi kinerja.

Tidak ada bulu. Hanya perbaikan nyata.

Perlu Website Lebih Cepat?

PadaBadan DG10, kami membangun situs high-performance Next.js yang melewati Core Web Vitals di setiap halaman.Dapatkan audit Lighthouse gratis dan laporan kinerja→