ReactDOMServer

ReactDOMServer객체를 통해 컴포넌트를 정적 마크업으로 렌더링 할 수 있습니다.

Reference

renderToPipeableStream()

ReactDOMServer.renderToPipeableStream(element, options)
JavaScript
복사

초기 html을 렌더링합니다. 인라인 <script>를 통해 팝인하는 지연된 콘텐츠 블록으로 HTML의 서스펜스 및 스트리밍을 완벽하게 지원합니다. hydrateRoot를 호출하게 되면 React는 이벤트 핸들러만 연결하며 빠른 로드가 된다.

let didError = false;
const stream = renderToPipeableStream(
	<App />,
	{
		onShellyReady(){
			// 에러발생시 처리를 이곳에서 한다.
			res.statusCode = didError ? 500 : 200;
			res.setHeader('Contesxt-type', 'text/html');
			stream.pipe(res);
		}.
		onShellError(error){
			// 에러발생시 대체페이지
			res.statusCode = 500;
			res.send('<!doctype html><p>Loading...</p>');
		},
		onAllReady(){
			// steaming을 원하지 않는다면 onShellReady대신 사용하세요
      // 전체페이지를 쏩니다.
			// res.statusCode = didError ? 500 : 200;
      // res.setHeader('Content-type', 'text/html');
      // stream.pipe(res);
		},
		onError(err){
			didError = true;
			console.error(error);
		},
	}
};
JavaScript
복사

renderToReadableStream()

ReactDOMServer.renderToReadableStream(element, options);
JavaScript
복사

초기 HTML을 보낸다. 그리고 ReadableStream을 Promise로 반환합니다. HTML의 suspense와 streaming을 지원합니다.

ReactDOM.hydrateRoot를 호출한다면 React는 이를 보존하고 이벤트 핸들러만 연결하여 빠른 로드를 합니다.

let controller =- new AbortController();
let didError = false;
try {
	let stream = await renderToReadableStream(
	<html>
		<body>Success</body>
	</html>,
	{
		signal: controller.signal,
		onError(error){
			didError = true;
			console.error(error);
		}
	}
);
return new Response(stream, {
	status: didError ? 500 : 200m
	headers: {'Content-Type': 'text/html'},
});
} catch(error){
	return new Response(
		'<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
	{
		status: 500,
		headers: {'Content-Type': 'text/html'}
	});
);
JavaScript
복사

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)
JavaScript
복사

data-reactroot와 같이 React에서 내부적으로 사용하는 추가적인 DOM attribute를 만들지 않습니다. 여분의 attribute를 제거해서 약간의 바이트를 절약할 수 있어, React를 간단한 정적 페이지 생성기로 사용하고 싶은 경우에 유용합니다.

renderToString()

ReactDOMServer.renderToString(element)
JavaScript
복사

React라 렌더링한 element들을 string으로 변환합니다. 이를 SEO 향상에 사용할 수 잇습니다.

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)
JavaScript
복사

renderToString과 비슷하지만 리엑트에서 사용하는 추가적인 DOM속성들을 만들지 않습니다.