[javascript] 프로미스를 이용한 서버 사이드 렌더링 처리

07 Dec 2023

javascript

서버 사이드 렌더링은 웹 페이지의 초기 렌더링을 서버에서 처리하여 클라이언트로 이미 렌더링된 페이지를 전송하는 기술입니다. 이를 통해 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)에도 도움을 줄 수 있습니다.

프로미스는 비동기 작업을 관리하는데 사용되는 객체입니다. 서버 사이드 렌더링 과정에서도 비동기 작업이 필요한 경우 프로미스를 사용하여 처리할 수 있습니다. 다음은 프로미스를 이용한 서버 사이드 렌더링 처리 방법에 대한 예제입니다.

// 서버 사이드 렌더링 함수
function serverRender() {
  return new Promise((resolve, reject) => {

    // 비동기 작업이 필요한 경우
    fetchData()
      .then(data => {
        // 데이터를 받아와 렌더링 처리
        const content = renderTemplate(data);

        // 렌더링 결과를 resolve하여 프로미스가 완료되도록 함
        resolve(content);
      })
      .catch(error => {
        // 에러가 발생한 경우 reject하여 프로미스가 실패되도록 함
        reject(error);
      });
  });
}

// 비동기 작업을 수행하는 함수
function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    // ...
    // 데이터 받아오기
    const data = getData();

    if (data) {
      // 데이터가 제대로 받아와진 경우 resolve하여 프로미스가 완료되도록 함
      resolve(data);
    } else {
      // 데이터를 받아오지 못한 경우 reject하여 프로미스가 실패되도록 함
      reject(new Error('Failed to fetch data'));
    }
  });
}

// 데이터를 받아와 렌더링하는 함수
function renderTemplate(data) {
  // 데이터를 이용하여 페이지 템플릿 렌더링
  // ...
  return renderedContent;
}

위의 예제에서 serverRender 함수는 서버 사이드 렌더링을 처리하는 함수입니다. fetchData 함수는 비동기 작업을 수행하고 데이터를 받아오는 역할을 담당하며, renderTemplate 함수는 받아온 데이터를 이용하여 페이지를 렌더링합니다.

프로미스를 이용하여 서버 사이드 렌더링을 처리할 경우, 데이터를 받아오는 과정이 완료될 때까지 기다렸다가 렌더링 작업을 시작하므로 데이터의 유효성을 확인할 수 있습니다. 또한, 프로미스의 catch 메서드를 이용하여 에러 처리를 할 수 있습니다.

서버 사이드 렌더링은 프론트엔드 개발에 있어 중요한 기술 중 하나입니다. 프로미스를 이용하여 비동기 작업을 처리하면 더욱 간편하고 유연하게 서버 사이드 렌더링을 구현할 수 있습니다.

참고 자료

MDN Web Docs - Promise