서버 사이드 렌더링은 웹 애플리케이션의 초기 로딩 속도를 개선하고 SEO(Search Engine Optimization)를 향상시키기 위해 많이 사용되는 기술입니다. 이번 글에서는 Promise를 활용하여 서버 사이드 렌더링 기능을 구현하는 방법을 알아보겠습니다.

Promise란?

Promise는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다.

• Pending(대기): 비동기 작업이 아직 수행되지 않은 상태입니다.
• Fulfilled(이행): 비동기 작업이 성공적으로 이루어진 상태입니다.
• Rejected(거부): 비동기 작업이 실패한 상태입니다.

Promise는 비동기 작업을 처리하는 중간 단계의 값입니다. 작업이 완료되면 해당 값을 얻을 수 있습니다.

서버 사이드 렌더링 기능 구현을 위한 Promise 사용하기

서버 사이드 렌더링을 구현하기 위해서는 클라이언트 요청에 대한 처리가 완료된 후, 클라이언트에게 데이터와 함께 렌더링된 HTML을 보내야 합니다. 이를 위해 Promise를 사용하여 비동기 작업을 관리할 수 있습니다.

const loadDataFromAPI = () => {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    fetchDataFromAPI((data, error) => {
      if (error) {
        reject(error);
      } else {
        resolve(data);
      }
    });
  });
};

const handleRequest = (req, res) => {
  loadDataFromAPI()
    .then(data => {
      const renderedHTML = renderHTML(data);
      res.send(renderedHTML);
    })
    .catch(error => {
      console.error(error);
      res.status(500).send('Error occurred!');
    });
};

위의 예시 코드에서 loadDataFromAPI 함수는 API에서 데이터를 비동기로 가져오는 작업을 수행합니다. 이때 Promise 객체를 반환하고, 비동기 작업이 완료되면 데이터를 resolve로 전달하거나 실패 시 reject로 에러를 전달합니다.

handleRequest 함수는 클라이언트의 요청을 처리하는 핸들러입니다. loadDataFromAPI 함수를 호출하여 데이터를 가져온 후, 데이터를 활용하여 HTML을 렌더링합니다. 마지막으로 렌더링된 HTML을 클라이언트에게 응답으로 보냅니다.

이렇게 Promise를 활용하여 서버 사이드 렌더링 기능을 구현할 수 있습니다.

#Promise #서버사이드렌더링