ReactDOMServer
ReactDOMServer nesnesi, bileşenleri statik işaretlemeye dönüştürmenizi sağlar. Genellikle, bir Node sunucusunda kullanılır:
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');Genel Bakış
Aşağıdaki metotlar hem sunucu hem de tarayıcı ortamlarında kullanılabilir:
Bu ilave metotlar yalnızca sunucuda kullanılabilen bir pakete (stream) bağlıdır ve tarayıcıda çalışmayacaktır.
Referans
renderToString()
ReactDOMServer.renderToString(element)React öğesini başlangıç HTML’ine dönüştürün. React bir HTML stringi döndürür. Sunucuda HTML oluşturmak ve daha hızlı sayfa yüklemeleri için ilk istek üzerine işaretlemeyi göndermek ve arama motorlarının sayfalarınızı SEO amacıyla taramasını sağlamak için bu yöntemi kullanabilirsiniz.
Zaten sunucu tarafından oluşturulmuş işaretlemeye sahip olan bir birimde ReactDOM.hydrate()‘i çağırırsanız, gayet performanslı bir ilk yükleme deneyimine sahip olmanız için React bunu saklayıp, yalnızca olay yöneticilerini ekleyecektir.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)renderToString‘e benzer şekildedir. Farklı olarak, React’in data-reactroot gibi dahili olarak kullandığı fazladan DOM nitelikleri oluşturmaz. Bu, ekstra özellikleri bir kenara atarak biraz bayt kurtarabileceğiniz için, React’i basit bir statik sayfa oluşturucu olarak kullanmak isterseniz yararlıdır.
İşaretlemeyi etkileşimli hale getirmek için istemci tarafında React’i kullanmayı planlıyorsanız, bu yöntemi kullanmayın. Onun yerine, sunucuda renderToString ve istemcide ReactDOM.hydrate() kullanın.
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)React öğesini başlangıç HTML’ine dönüştürün. React bir HTML string çıktısı veren bir Readable stream döndürür. Bu akışın HTML çıktısı ReactDOMServer.renderToString öğesinin döndüreceği değer ile tamamen aynıdır. Sunucuda HTML oluşturmak ve daha hızlı sayfa yüklemeleri için ilk istek üzerine işaretlemeyi göndermek ve arama motorlarının sayfalarınızı SEO amacıyla taramasını sağlamak için bu yöntemi kullanabilirsiniz.
Zaten sunucu tarafından oluşturulmuş işaretlemeye sahip olan bir birimde ReactDOM.hydrate()‘i çağırırsanız, gayet performanslı bir ilk yükleme deneyimine sahip olmanız için React bunu saklayıp, yalnızca olay yöneticilerini ekleyecektir.
Not:
Yalnızca sunucu için. Bu API tarayıcıda mevcut değildir.
Bu metot utf-8 ile kodlanmış bir bayt akışı (byte stream) döndürür. Başka bir kodlamadaki bir akışa ihtiyacınız varsa, kod dönüştürme metni için dönüştürme akışları (transform streams) sağlayan iconv-lite gibi bir projeye göz atın.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)renderToNodeStream‘e benzer şekildedir. Farklı olarak, React’in data-reactroot gibi dahili olarak kullandığı fazladan DOM nitelikleri oluşturmaz. Bu, ekstra özellikleri bir kenara atarak biraz bayt kurtarabileceğiniz için, React’i basit bir statik sayfa oluşturucu olarak kullanmak isterseniz yararlıdır.
Bu akışın HTML çıktısı ReactDOMServer.renderToStaticMarkup öğesinin döndüreceği değer ile tamamen aynıdır.
İşaretlemeyi etkileşimli hale getirmek için istemci tarafında React’i kullanmayı planlıyorsanız, bu yöntemi kullanmayın. Onun yerine, sunucuda renderToNodeStream ve istemcide ReactDOM.hydrate() kullanın.
Not:
Yalnızca sunucu için. Bu API tarayıcıda mevcut değildir.
Bu metot utf-8 ile kodlanmış bir bayt akışı (byte stream) döndürür. Başka bir kodlamadaki bir akışa ihtiyacınız varsa, kod dönüştürme metni için dönüştürme akışları (transform streams) sağlayan iconv-lite gibi bir projeye göz atın.