HTML 고급 프로젝트

HTML 서버 사이드 렌더링 (SSR)

HTML 서버 사이드 렌더링 (SSR) — 고급

서버 사이드 렌더링 (SSR)

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

서버 사이드 렌더링(SSR)은 웹 애플리케이션의 성능과 SEO(검색 엔진 최적화)에 중요한 역할을 합니다. 특히, 사용자 경험을 극대화하려는 현대 웹 애플리케이션에서 SSR을 이해하고 활용하는 것은 필수적입니다. 클라이언트 사이드 렌더링(CSR)과 비교할 때, SSR은 초기 로딩 속도가 빠르고 검색 엔진이 페이지 내용을 쉽게 인식할 수 있도록 돕습니다.

만약 SSR을 모른다면, 페이지가 사용자에게 보이기까지 오랜 시간이 걸리거나 검색 엔진이 귀하의 웹사이트를 제대로 크롤링하지 못해 검색 결과에서 누락되는 문제를 겪을 수 있습니다. 이는 결국 비즈니스 기회를 잃게 만들 수 있습니다.

2. 핵심 개념 설명

서버 사이드 렌더링은 클라이언트가 웹 페이지를 요청할 때, 서버가 HTML을 생성하여 클라이언트에 전달하는 방식입니다. 이를 비유하자면, 레스토랑에서 음식을 주문할 때 요리사가 주방에서 요리를 하고, 이를 손님에게 서빙하는 과정과 유사합니다. 손님(클라이언트)은 요리사가 만든 요리(HTML)를 받아 바로 먹을 수 있습니다.

용어	설명
SSR (서버 사이드 렌더링)	서버에서 HTML을 생성하여 클라이언트에 전달하는 방식
CSR (클라이언트 사이드 렌더링)	클라이언트에서 JavaScript를 통해 HTML을 생성하는 방식
SEO (검색 엔진 최적화)	검색 엔진에서 웹사이트의 가시성을 높이는 기법

3. 기본 코드 예제

아래는 Node.js와 Express를 사용한 기본적인 SSR 예제입니다.

// server.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send(
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8">
        <title>SSR 예제</title>
      </head>
      <body>
        <h1>서버 사이드 렌더링 페이지</h1>
        <p>이 페이지는 서버에서 만들어졌습니다.</p>
      </body>
    </html>
    );
});

app.listen(port, () => {
    console.log(\서버가 http://localhost:\${port}에서 실행 중입니다.\);
});

실행 결과: 웹 브라우저에서 http://localhost:3000에 접속 시, "서버 사이드 렌더링 페이지"라는 제목과 함께 본문이 표시됩니다.

코드 한 줄씩 동작 설명:

const express = require('express');: Express 모듈을 불러옵니다.
const app = express();: Express 애플리케이션 객체를 생성합니다.
const port = 3000;: 서버가 사용할 포트를 정의합니다.
app.get('/', (req, res) => {...});: 루트 경로에 대한 GET 요청을 처리하는 핸들러를 설정합니다.
res.send(...);: 클라이언트에 HTML 콘텐츠를 응답합니다.
app.listen(port, () => {...});: 서버를 지정된 포트에서 실행합니다.

4. 실전 활용 예제

예제 1: 사용자 프로필 페이지

쇼핑몰에서 사용자의 프로필 페이지를 구현할 때, 서버에서 사용자 정보를 미리 렌더링하여 클라이언트에 전달하면 페이지 로딩 속도가 빨라집니다.

app.get('/profile', (req, res) => {
    const user = { name: '홍길동', age: 30 }; // 서버에서 가져온 사용자 정보
    res.send(
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8">
        <title>사용자 프로필</title>
      </head>
      <body>
        <h1>${user.name}의 프로필</h1>
        <p>나이: ${user.age}</p>
      </body>
    </html>
    );
});

예제 2: 블로그 게시글 페이지

블로그에서 특정 게시글을 보여줄 때, SSR을 사용하면 검색 엔진이 게시글 내용을 쉽게 인식할 수 있습니다.

app.get('/post/:id', (req, res) => {
    const postId = req.params.id;
    const post = { title: '제목', content: '내용' }; // DB에서 가져온 게시글 정보
    res.send(
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8">
        <title>${post.title}</title>
      </head>
      <body>
        <h1>${post.title}</h1>
        <p>${post.content}</p>
      </body>
    </html>
    );
});

5. 흔한 실수와 주의사항

실수 1: HTML의 잘못된 구조

잘못된 코드:

res.send(
    <html>
      <head>
        <title>제목</title>
      </head>
      <body>
        <h1>제목</h1>
      </body>
    ); // </html> 태그가 닫히지 않음

올바른 코드:

res.send(
    <html>
      <head>
        <title>제목</title>
      </head>
      <body>
        <h1>제목</h1>
      </body>
    </html>
); // 모든 태그가 올바르게 닫힘

실수 2: 비동기 데이터 처리

서버에서 비동기적으로 데이터를 가져오는 경우, 데이터가 준비되기 전에 HTML을 응답하려 할 수 있습니다.

잘못된 코드:

app.get('/data', (req, res) => {
    fetchData().then(data => {
        res.send(<p>${data}</p>);
    });
    // 비동기 처리로 인해 데이터가 없을 때 응답함
});

올바른 코드:

app.get('/data', async (req, res) => {
    const data = await fetchData();
    res.send(<p>${data}</p>);
});

6. 정리

SSR은 초기 로딩 속도를 향상시키고 SEO를 개선합니다.
서버가 HTML을 생성하여 클라이언트에 전달하는 방식입니다.
사용자 프로필이나 블로그 게시글과 같은 동적인 콘텐츠에 유용합니다.
비동기 데이터 처리를 고려해야 하며, HTML의 구조를 항상 확인해야 합니다.

다음에 학습하면 좋은 주제는 클라이언트 사이드 렌더링(CSR)과 SSR의 비교, 또는 React.js와 같은 프레임워크에서의 SSR 구현입니다.

학습