26. 서버 사이드 렌더링(SSR) - 1

SSR의 개념과 장단점

서버 사이드 렌더링(Server-Side Rendering, SSR)은 웹 애플리케이션을 서버에서 렌더링하여 클라이언트에 보내는 방식입니다. 이번 글에서는 SSR의 개념과 장단점에 대해 알아보겠습니다.

SSR의 개념

SSR은 클라이언트가 서버에 요청을 보내면 서버에서 요청을 처리하여 초기 HTML을 생성하고, 이를 클라이언트에게 전송합니다. 클라이언트는 이 HTML을 받아서 렌더링하고, 그 후에 JavaScript를 다운로드하여 실행합니다. 이를 통해 사용자는 초기 페이지를 빠르게 볼 수 있고, 검색 엔진 최적화(SEO)에 유리합니다.

SSR의 장점

1. 검색 엔진 최적화(SEO): SSR을 사용하면 초기 렌더링된 HTML을 검색 엔진이 쉽게 파악할 수 있어서 검색 엔진 최적화가 용이합니다.
2. 성능 향상: 초기 렌더링된 HTML을 통해 사용자는 더 빠르게 컨텐츠를 볼 수 있으며, 이는 전반적인 성능 향상으로 이어질 수 있습니다.
3. 소셜 미디어 미리보기: 소셜 미디어에서 링크를 공유할 때 초기 렌더링된 HTML이 함께 전송되므로 미리보기가 적절하게 생성됩니다.

SSR의 단점

1. 서버 부하 증가: SSR을 사용하면 서버에서 페이지를 렌더링해야 하므로 서버 부하가 증가할 수 있습니다.
2. 초기 로딩 시간: SSR을 사용하더라도 JavaScript 파일이 다운로드되고 실행되어야 하므로 초기 로딩 시간이 증가할 수 있습니다.
3. 클라이언트 사이드 라우팅 어려움: 클라이언트 사이드 라우팅과의 호환성을 유지하기 위해 추가적인 설정이 필요할 수 있습니다.

코드 예제

// SSR을 사용한 React 컴포넌트 예제
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const html = renderToString(<App />);
console.log(html);

 

위 코드는 서버에서 React 애플리케이션을 렌더링하여 초기 HTML을 생성하는 예제입니다.

결론

SSR은 웹 애플리케이션의 성능을 향상시키고 SEO를 개선하는 데 유용한 기술입니다. 그러나 서버 부하가 증가하고 초기 로딩 시간이 늘어날 수 있는 단점도 고려해야 합니다. 프로젝트의 요구사항과 성능을 고려하여 SSR을 적절히 활용하는 것이 중요합니다.