서버 사이드 렌더링(Server Side Rendering, SSR)은 웹 애플리케이션을 클라이언트에서가 아닌 서버에서 렌더링하여 초기 페이지 로딩 시간을 개선하는 기술입니다. SSR의 원리를 알아보겠습니다.
SSR이란 무엇인가요?
SSR은 클라이언트에게 웹 페이지를 보여주기 전에 서버에서 해당 페이지의 HTML을 미리 렌더링합니다. 즉, 사용자가 웹 페이지에 접속하면, 서버는 처리된 HTML을 반환하여 초기 렌더링을 담당하고, 그 후에 클라이언트 사이드 코드가 로드되어 상호작용 가능한 페이지가 되는 것입니다.
SSR의 장점
SSR을 사용하면 첫 화면 로딩 시간을 줄일 수 있습니다. 이로 인해 검색 엔진 최적화(SEO)가 향상되고, 사용자 경험이 향상됩니다. 또한, 초기 렌더링을 통해 첫 화면을 사용자에게 빠르게 보여줄 수 있습니다.
SSR 동작 방식
SSR은 일반적으로 프레임워크나 라이브러리를 사용하여 구현됩니다. 가장 인기 있는 SSR 라이브러리 중 하나인 React에서는, ReactDOMServer를 사용하여 SSR을 구현합니다.
import ReactDOMServer from 'react-dom/server';
import App from './App';
const html = ReactDOMServer.renderToString(<App />);
위의 예시 코드에서, ReactDOMServer.renderToString 메소드를 사용하여 React 컴포넌트를 HTML 문자열로 렌더링합니다.
SSR의 한계
SSR은 클라이언트 사이드 렌더링(CSR)과 비교했을 때 추가적인 서버 측 부하를 유발할 수 있습니다. 또한, 런타임 환경에서 초기 로딩 시간을 감소시키기 위해 많은 설정이 필요할 수 있습니다.
마무리
SSR은 초기 페이지 로딩 시간을 개선하고 SEO를 향상시킬 수 있는 강력한 기술입니다. 그러나 서버 측 부하와 설정의 복잡성에 대비하여 적절한 상황에서 활용되어야 합니다.
참고 자료
이상으로 SSR의 원리에 대해 알아보았습니다. 감사합니다.