웹

[Web] SSR이란? 서버 사이드 렌더링

Tinkies 2025. 3. 1. 11:04

1. 서버 사이드 렌더링(SSR) 이란?

서버 사이드 렌더링(SSR)은 웹 애플리케이션의 초기 HTML 콘텐츠를 서버에서 생성해 클라이언트에게 전달하는 방식으로, 이를 통해 페이지 로딩 속도가 빨라지고, SEO(검색 엔진 초기화)에도 유리합니다. 반대로 클라이언트 사이트 렌더링

 

(CSR)은 브라우저에서 Javascript를 통해 콘텐츠를 생성하는 방식으로, 사용자 경험을 향상 시키는 데 좋지만 로딩 속도가 느릴 수 있습니다. 서버 사이드 렌더링의 주요 특징은 다음과 같습니다.

 

  • 서버에서 HTML 생성: 요청이 들어오면 서버가 HTML을 렌더링하여 클라이언트에 전달
  • 초기 로딩 속도: 사용자가 페이지를 요청할 때, 미리 렌더링된 HTML을 받아볼 수 있어 초기 로딩속도 빠름
  • SEO 최적화: 검색 엔진 크롤러가 쉽게 내용을 인식할 수 있어 SEO에 유리
  • 상태 관리: 서버에서 상태를 관리할 수 있어 클라이언트와의 데이터 동기화가 필요할 수 있음

2. SSR의 장단점

  • 잠점
    • 빠른 초기 로딩: 사용자에게 즉시 콘테츠를 제공할 수 있음
    • SEO 향상: 검색 엔진에 최적화된 콘텐츠 제공 가능 
    • 소셜 미디어 공유 최적화: 미리보기 메타 태그가 서버에서 렌더링되어 공유시 올바르게 표시
    • 보안: 중요한 비즈니스 로직이나 데이터 처리를 서버에서 수행하므로 클라이언트의 노출을 줄일 수 있음
  • 단점
    • 서버 부하: 모든 요청에 대해 서버가 렌더링을 수행하야 하므로 서버 부하 증가
    • 상태 관리 복잡성: 클라이언트와 서버 간의 상태 동기화가 복잡할 수 있음
    • 인터랙티브한 요소 지연: 클라이언트 사이드에서 추가적인 Javascript가 로드되어야 하므로 인터랙션 지연
    • 개발 비용 증가: SSR을 구현하기 위한 추가적인 설정과 코드가 필요

3. SSR의 사용 예제

  • 블로그: 글 목록과 내용을 미리 렌더링하여 사용자에게 빠르게 보여줌
  • 전자 상거래 사이트: 상품 페이지를 서버에서 렌더링하여 SEO를 향상시키고, 사용자에게 빠른 정보 제공
  • 뉴스 사이트: 최신 뉴스 기사를 서버에서 렌더링하여 빠르게 사용자에게 전달
  • 기업 웹 사이트: 기업 정보와 서비스 소개를 빠르게 로드하여 사용자 경험 개선

4. Node.js를 사용한 간단한 HTML 예제

먼저 Node.js가 설치되어야 합니다. Node.js를 세팅하고 Express를 설치해야합니다.

npm init -y 
npm install express

 

그런 다음 server.js라는 파일을 만들고 아래 코드를 입력합니다.

const express = require("express");
const app = express();
const PORT = 3000;

// 간단한 HTML 템플릿
const htmlTemplate = (title, content) => `
   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
   </head>
   <body>
     <h1>${title}</h1>
     <div>${content}</div>
   </body>
   </html>
`;

// 라우트 정의
app.get("/", (req, res) => {
  const title = "server-side rendering example";
  const content = `This is running Server-side rendering: ${PORT}`;
  const html = htmlTemplate(title, content);
  res.send(html);
});

// 서버 시작
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

5. 서버 실행

터미널에서 아래 명령어로 서버를 실행합니다.

node server.js

 

 

GitHub - nodeJsroom/server-side-rendering

Contribute to nodeJsroom/server-side-rendering development by creating an account on GitHub.

github.com

 

LIST