자바스크립트와 Nginx를 사용한 서버 사이드 렌더링 구현 방법

11 Oct 2023

nginx

서버 사이드 렌더링은 최근 웹 애플리케이션 개발에서 중요한 주제로 떠오르고 있습니다. 클라이언트 측에서 렌더링되는 SPA(Single Page Application)는 사용자 경험을 향상시키기 위해 많은 장점을 가지고 있지만, 처음 페이지 로드 시 초기 렌더링을 위해 필요한 자바스크립트의 로딩 시간이 걸린다는 단점이 있습니다. 이러한 단점을 해결하기 위해 서버 사이드 렌더링을 도입하여 초기 로딩 속도를 향상시킬 수 있습니다.

1. 서버 사이드 렌더링 개요

서버 사이드 렌더링은 서버에서 HTML 마크업을 생성하여 클라이언트에게 제공하는 방식입니다. 이렇게 서버에서 렌더링된 HTML 페이지를 클라이언트에서 받아와 렌더링해주기 때문에 초기 로딩 속도가 향상됩니다.

2. Nginx를 사용한 프록시 설정

서버 사이드 렌더링을 구현하기 위해서는 Nginx를 사용하여 프록시 서버를 설정해야 합니다. Nginx는 빠른 속도와 높은 성능을 제공하며, 프록시 서버로써 클라이언트 요청을 받아 서버 사이드 렌더링된 HTML 페이지로 리다이렉트해줍니다.

아래는 Nginx의 기본 설정 예시입니다.

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000; // 서버 사이드 렌더링된 HTML을 제공하는 서버의 주소
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

위 설정은 프론트엔드 서버가 3000번 포트에서 동작하고 서버 사이드 렌더링된 HTML을 해당 포트로 전달하는 예시입니다.

3. 자바스크립트로 서버 사이드 렌더링 구현하기

서버 사이드 렌더링을 구현하기 위해서는 자바스크립트를 사용하여 필요한 데이터를 서버에서 받아와 HTML 마크업으로 렌더링하는 코드를 작성해야 합니다. 이 코드는 서버에서 실행되기 때문에 클라이언트의 자원을 활용할 수 없으므로 유의해야 합니다.

아래는 서버에서 마크업을 생성하는 예시 코드입니다.

const express = require('express');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
    const appString = ReactDOMServer.renderToString(<App />);
    const html = `
        <html>
            <head>
                <title>Server Side Rendering</title>
            </head>
            <body>
                <div id="root">${appString}</div>
                <script src="/bundle.js"></script> // 클라이언트 자바스크립트 번들링 파일
            </body>
        </html>
    `;
    res.send(html);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

위 코드는 Express를 사용하여 / 경로로 들어오는 요청에 대해 React 컴포넌트를 렌더링해주는 예시입니다. renderToString 메소드를 사용하여 컴포넌트를 HTML 문자열로 변환하고, 클라이언트에서는 해당 문자열을 받아와 렌더링하게 됩니다.

마치며

이번 글에서는 자바스크립트와 Nginx를 사용하여 서버 사이드 렌더링을 구현하는 방법에 대해 알아보았습니다. 서버 사이드 렌더링을 적용하면 초기 로딩 속도 개선과 SEO 최적화에 도움이 되며, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

#javascript #Nginx