React ile server-side rendering

server-side rendering'in ne olduğu ve React ile server-side rendering'in nasıl yapıldığını anlatan makale.

Temmuz 14, 2021

2 dakika okuma

Server Side Rendering ve Client Side rendering Nedir?

Dertli başların derdi SEO diğer adıyla arama motoru optimizasyonu. Meta etiketleri her ne kadar önemli olsa da bir o kadar da sitenin içerik kısmı yani body de çok önemlidir.

Eğer Bir Vue, React veya angular gibi tarayıcı kısmında render edilen bir framework kullanıyorsanız (merak etmeyin sadece tarayıcıda olmak zorunda değil) Seo dertli başınıza dert açar.

Server-side rendering Server kısmında render edilerek bir raw html çıktısı aldığınız işlemdir.
Client-side rendering Tarayıcı kısmında Javascript ile render edilip DOM'a yerleştirilen işlemdir.

Daha detaylı kaynaklardan araştırabilirsiniz kısaca diyebileceklerim bunlar.

React ile server side rendering nasıl yapılır?

Bu konuda eskide olsa da Github'da bulabileceğiniz bir çok proje var fakat bunları kullanmak yerine kesinlikle Next.js veya Gatsby (Sadece static üretebilir) kullanmalısınz fakat kısaca anlatmak gerekirse başlayalım.

renderToString

const ReactDOMServer = require('react-dom/server') paketinin sağladığı renderToString fonksiyonu ile Server'da React'ı render edebilirsiniz.

const ReactDOMServer = require('react-dom/server');
const http = require('http');

const server = http
  .createServer((req, res) => {
    // Dikkat JSX yazmak için Babel'i ve @babel/preset-react'ı kurmanız gerekmektedir şuanlık küçük bir örnek ve çalışmayacaktır.
    const html = ReactDOMServer.renderToString(<div className="bg-gray-500">Hello World</div>); // <div class="bg-gray-500">Hello World</div>
    res.send(`<DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
    </head>
     <body>${html}</body>
     </html>
     `);
  })
  .listen(3000);

Seklinde kullanıcıya tam html göndeririz fakat <body>${html}</body> şeklinde göndermek zorunda değiliz React ile tüm sayfayı da render edebiliriz.

renderToStaticMarkup

renderToStaticMarkup fonksiyonu ise sadece Static HTML render eder yani useEffect gibi hooklar çalışmaz. React bileşenlerini html'e çevirmek için birebirdir.

const ReactDOMServer = require('react-dom/server');

function convertToHTML(component) {
  return ReactDOMServer.renderToStaticMarkup(component);
}

console.log(
  convertToHTML(
    <div className="react-ozel-propslar" onClick={(e) => console.log('yehuu', e)}>
      naber
    </div>
  )
);
// <div class="react-ozel-propslar" onClick="undefined">naber</div>

NOT: renderToString ve renderToStaticMarkup fonksiyonları tarayıcıda da çalışabilir.

Sonuç

Bu makalede Server Side rendering'in kısaca ne olduğu ve ne ile yapıldığını gösterdim. diğer makalaler gibi express ile server side rendering yapmayı gösteremedim fakat basitçe görmek istiyorsanız: https://www.digitalocean.com/community/tutorials/react-server-side-rendering

Hızlıca işimi herşey hazır yapıp geçmek istiyorum derseniz Next.js veya Gatsby kullanmanız daha iyi olur.