서버사이드 렌더링 (SSR)

1. 도입 (왜 배워야 하는가)

서버사이드 렌더링(SSR)은 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 중요한 기술입니다. SSR을 사용하면 초기 페이지 로드 시 서버에서 HTML을 생성하여 클라이언트에 전달합니다. 이는 검색 엔진 최적화(SEO)와 페이지 로딩 속도에 큰 이점을 제공합니다.

만약 SSR을 도입하지 않는다면, 초기 로딩 시간이 길어져 사용자가 페이지를 떠날 가능성이 높아지고, SEO 최적화에 어려움을 겪게 됩니다. 특히, 동적인 콘텐츠가 많은 웹사이트에서는 SSR이 필수적일 수 있습니다.

2. 핵심 개념 설명

2.1 SSR이란?

서버사이드 렌더링(SSR)은 클라이언트(브라우저)가 아닌 서버에서 HTML 페이지를 렌더링하는 방식입니다. 클라이언트가 요청을 하면 서버가 HTML을 생성하여 클라이언트에 보내는 구조입니다.

2.2 클라이언트 사이드 렌더링(CSR)과의 차이

비유

SSR을 음식점에 비유하자면, 손님이 식당에 들어와서 요리를 기다리는 대신, 요리사가 미리 요리를 만들어 놓고 손님이 오자마자 바로 제공하는 것과 같습니다. 반면, CSR은 손님이 들어온 후 요리사가 재료를 준비하고 요리를 시작하는 과정으로 비유할 수 있습니다.

3. 기본 코드 예제

다음은 Node.js와 Express를 이용한 간단한 SSR 예제입니다.

const express = require('express'); // Express 모듈 불러오기
const app = express(); // Express 애플리케이션 생성

app.get('/', (req, res) => { // 루트 경로에 대한 GET 요청 처리
    res.send('<h1>안녕하세요, 서버사이드 렌더링!</h1>'); // HTML 응답
});

app.listen(3000, () => { // 3000번 포트에서 서버 실행
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});

실행 결과

서버가 3000번 포트에서 실행 중입니다.

코드 한 줄씩 동작 설명

1. const express = require('express');: Express 모듈을 불러옵니다. 이는 서버를 쉽게 구축할 수 있도록 도와줍니다.
2. const app = express();: Express 애플리케이션 인스턴스를 생성합니다.
3. app.get('/', (req, res) => {...});: 루트 경로('/')에 대한 GET 요청을 처리하는 핸들러를 정의합니다.
4. res.send('<h1>안녕하세요, 서버사이드 렌더링!</h1>');: 클라이언트에게 HTML 응답을 보냅니다.
5. app.listen(3000, () => {...});: 3000번 포트에서 서버를 시작하고, 실행 중임을 콘솔에 출력합니다.

4. 실전 활용 예제

4.1 쇼핑몰에서 장바구니 구현하기

쇼핑몰에서 사용자가 장바구니에 추가한 상품 정보를 서버에서 렌더링하여 보여줄 수 있습니다.

app.get('/cart', (req, res) => {
    const cartItems = ['사과', '바나나', '체리']; // 장바구니 아이템
    const html = <h1>장바구니</h1><ul>${cartItems.map(item => <li>${item}</li>).join('')}</ul>;
    res.send(html); // 장바구니 HTML 응답
});

4.2 사용자 프로필 페이지

사용자가 로그인한 후 자신의 프로필 정보를 서버에서 렌더링하여 보여줍니다.

app.get('/profile', (req, res) => {
    const userProfile = { name: '홍길동', age: 25 };
    const html = <h1>사용자 프로필</h1><p>이름: ${userProfile.name}</p><p>나이: ${userProfile.age}</p>;
    res.send(html); // 프로필 HTML 응답
});

5. 흔한 실수와 주의사항

실수 1: 클라이언트 사이드 렌더링을 사용하려는 경향

• 잘못된 코드:

// 이 코드에서는 클라이언트에서 렌더링하려고 시도함
res.send('<h1>안녕하세요, 서버사이드 렌더링!</h1><script>...</script>');

• 올바른 코드:

// 서버에서 HTML을 완전히 렌더링하여 전달함
res.send('<h1>안녕하세요, 서버사이드 렌더링!</h1>');

실수 2: 비동기 처리를 간과

• 잘못된 코드:

app.get('/data', (req, res) => {
    const data = fetchData(); // 비동기 데이터 처리
    res.send(data); // 데이터가 준비되지 않음
});

• 올바른 코드:

app.get('/data', async (req, res) => {
    const data = await fetchData(); // 비동기 데이터 처리
    res.send(data); // 데이터가 준비되었을 때 응답
});

6. 정리

• SSR은 초기 페이지 로드 속도를 높이고 SEO를 개선하는 데 유리하다.
• 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식이다.
• 비동기 처리와 클라이언트 사이드 렌더링을 혼동하지 않도록 주의해야 한다.

다음에 학습하면 좋은 주제:

• 클라이언트 사이드 렌더링(CSR)
• 정적 사이트 생성(Static Site Generation, SSG)
• Next.js와 같은 SSR 프레임워크 사용법