Skip to main content

Next.js Projelerinde CSS'i Sunucu Tarafında (SSR) Doğru Şekilde Render Etme

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber, Next.js tabanlı React uygulamalarında CSS’in sunucu tarafında doğru şekilde nasıl render edileceğini öğretir.
Amaç, FOUC (Flash of Unstyled Content) yani “stilsiz içerik parlaması” problemini ortadan kaldırmaktır.
styled-components ile yaşanan SSR uyumsuzluklarını analiz edip, Next.js’in yerleşik çözümü olan styled-jsx ile nasıl kalıcı bir stil yapısı kurabileceğinizi öğreneceksiniz.

🧠 Teknik Özet​

KriterAçıklama
Ana Teknik KonuNext.js uygulamalarında CSS’in Sunucu Tarafında Render Edilmesi (SSR).
Hangi Problemi Çözüyor?SSR sırasında bileşen stillerinin kaybolması, className uyuşmazlıkları ve FOUC hatalarını giderir.
Kullanıcı Adımları1️⃣ Next.js kurulumu. 2️⃣ Global stilleri ekleme. 3️⃣ styled-components ile deneme. 4️⃣ SSR sonrası hata gözlemi. 5️⃣ styled-jsx ile kalıcı çözüm.
Teknik AmaçSunucu renderı sırasında CSS’in de üretilmesini sağlayarak kullanıcıya stil kaybı olmadan sayfa göstermek.

💅 1. React’te Kullanılan Stil Kalıpları​

React projelerinde kullanılan üç yaygın stil yöntemi vardır, ancak her biri SSR senaryosunda farklı davranır:

Stil KalıbıTanımNotlar
Global StillerHarici CSS veya CDN dosyaları eklenir.Genelde fontlar ve reset’ler için kullanılır. Bileşen çakışmalarına neden olabilir.
Satır İçi (Inline) Stillerstyle prop’u üzerinden direkt DOM elementine uygulanır.Pseudo-class (:hover gibi) desteği yoktur.
Bileşen Tabanlı (CSS-in-JS)styled-components veya Emotion gibi araçlarla CSS bileşen içinde yazılır.Tekrar kullanılabilir, modern yöntemdir ama SSR uyumu ek yapılandırma ister.

⚙️ 2. Proje Kurulumu ve Global CSS Ekleme​

Öncelikle Next.js projesini oluşturup temel stilleri ekleyelim.

📦 Kurulum​

mkdir next-ssr-css-ornek
cd next-ssr-css-ornek
npm init -y
npm install [email protected] [email protected] [email protected]

package.json dosyasına geliştirme betiği ekleyin:


{
  "scripts": {
    "dev": "next"
  }
}

🌐 İlk Sayfa ve Global CSS​

pages/index.js dosyasını oluşturun:


import React from 'react';
import Head from 'next/head';

const Index = () => (
  <div>
    <Head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
      <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
      <link rel="stylesheet" href="/static/base.css" />
    </Head>
    <h1>Merhaba, Next.js Projemiz!</h1>
  </div>
);

export default Index;

static/base.css oluşturun:


body {
  font-family: 'Raleway', sans-serif;
  color: #222;
}

Bu dosya genel stilleri tanımlar. Artık npm run dev ile projeyi başlatabilir ve localhost:3000’de sonucu görebilirsiniz.

💥 3. styled-components ile SSR Sorunu​

Şimdi popüler CSS-in-JS kütüphanesi styled-components’ı kullanalım.


npm install [email protected]

components/Button.js dosyasını oluşturun:


import React from 'react';
import styled from 'styled-components';

const ButtonBase = (props) => <button {...props}>{props.children}</button>;

const Button = styled(ButtonBase)`
  background: #0077e2;
  box-shadow: 0 2px 7px rgba(120,137,149,0.25);
  border-radius: 3px;
  padding: 10px;
  color: #fff;
  border: #0077e2;
  text-transform: uppercase;
`;

export default Button;

Ve pages/index.js içinde çağırın:


import Button from '../components/Button';

const Index = () => (
  <div>
    <h1>Merhaba, Next.js!</h1>
    <Button>Tıkla</Button>
  </div>
);

⚠️ Sorun: Stil Kaybolması (FOUC)​

Sayfayı “sert yenilediğinizde” (Ctrl+Shift+R), buton stilleri kaybolur. Konsolda şu hata belirir:


Warning: Prop `className` did not match.

styled-components stilleri yalnızca istemci tarafında oluşturur, bu nedenle SSR çıktısında yer almaz.

🧩 4. styled-jsx ile Kalıcı Çözüm​

Next.js ile birlikte gelen styled-jsx, hem istemci hem de sunucu tarafında stilleri render eder. Ek kurulum gerektirmez.

🧱 Buton Bileşenini Yeniden Yazalım​


import React from 'react';

const Button = (props) => (
  <button {...props}>
    {props.children}
    <style jsx>{`
      background: #0077e2;
      box-shadow: 0 2px 7px rgba(120,137,149,0.25);
      border-radius: 3px;
      text-transform: uppercase;
      padding: 10px;
      color: #fff;
      border: #0077e2;
    `}</style>
  </button>
);

export default Button;

Bu sayede stil hem SSR aşamasında hem de tarayıcıda eş zamanlı render edilir.

🧠 5. Çoklu Elementleri Stilleme​

Birden fazla HTML elemanı olan bileşenlerde CSS seçicileri kullanabilirsiniz:


const TitleAndButton = () => (
  <div>
    <h1 className="baslik">Başlık</h1>
    <button>Tıkla</button>
    <style jsx>{`
      h1.baslik { color: #222; }
      button {
        background: #0077e2;
        color: white;
        padding: 10px;
        border-radius: 4px;
      }
    `}</style>
  </div>
);

Artık sayfayı yenilediğinizde FOUC yaşanmaz — stiller sunucudan yüklenir.

💬 Sıkça Sorulan Sorular (SSS)​

  1. CSS’in Sunucu Tarafında Render Edilmesi neden önemlidir?

SSR, ilk yükleme hızını artırır ve arama motorları için daha iyi SEO sağlar. Stillerin SSR edilmesi, “stilsiz yükleme” problemini ortadan kaldırır.

  1. styled-components artık SSR destekliyor mu?

Evet, fakat özel _document.js yapılandırması gerekir. styled-jsx ise hazır entegre gelir.

  1. styled-jsx ile global stil tanımlayabilir miyim?

Evet, global anahtarını kullanabilirsiniz:


<style jsx global>{`body { margin: 0; }`}</style>
  1. Hangi yöntemi seçmeliyim?

Bileşen bazlı stiller için styled-jsx, uygulama geneli için global CSS tercih edin.

🏁 Sonuç​

Bu rehberde Next.js projelerinde SSR uyumlu CSS render işlemini nasıl yapacağınızı öğrendiniz. styled-components ile yaşanan stil kaybı sorununu styled-jsx ile kalıcı olarak çözdük.

⚡ Stillerinizin sunucuda da render edilmesini sağlayarak ilk yükleme süresini azaltabilir, kullanıcılarınıza sorunsuz bir görsel deneyim sunabilirsiniz.

💡 Bu teknikleri hemen Rabisu Bulut platformunda başlattığınız Next.js projelerinizde test edin ve performans farkını gözlemleyin.