Colin's Blog
- 자바스크립트 Turbolinks를 활용한 서버 사이드 렌더링 개발하기

지금은 웹 애플리케이션이 사용자의 동작에 따라 페이지를 다시 로드하는 대신에, 단일 페이지 애플리케이션(SPA)이 주로 사용되고 있습니다. SPA는 매끄럽고 빠른 사용자 경험을 제공하지만, 초기 로딩 시간과 검색 엔진 최적화(SEO) 문제를 야기할 수 있습니다. 이에 대한 해결책으로 서버 사이드 렌더링(SSR)을 사용하는 것이 좋습니다.

Turbolinks는 이러한 문제를 해결하기 위해 개발된 자바스크립트 라이브러리입니다. Turbolinks는 SPA와 서버 사이드 렌더링을 함께 사용할 수 있도록 지원하며, 기존의 기능은 유지하면서도 초기 로딩 속도를 향상시킬 수 있습니다.

서버 사이드 렌더링을 구현하기 위해 다음과 같은 단계를 따를 수 있습니다.

  1. 서버 측에서 렌더링할 페이지의 데이터를 가져옵니다.
  2. 가져온 데이터를 템플릿 엔진을 사용하여 HTML로 렌더링합니다.
  3. Turbolinks를 사용하여 클라이언트 측으로 전달된 HTML을 적용합니다.
  4. 클라이언트 측에서 추가적인 동적인 동작을 처리합니다.

아래는 Turbolinks를 사용한 간단한 예제 코드입니다.

// 페이지 로드 시 Turbolinks 초기화
document.addEventListener('turbolinks:load', () => {
  // 서버로부터 데이터 가져오기
  fetchData()
    .then(data => {
      // 데이터를 HTML로 렌더링
      const html = renderTemplate(data);
      // Turbolinks를 사용하여 페이지 전환
      Turbolinks.visit('/', { action: 'replace' });
      // 클라이언트 측에서 추가적인 동작 처리
      handleAdditionalActions(html);
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

// 서버로부터 데이터 가져오는 비동기 함수
function fetchData() {
  return fetch('/api/data')
    .then(response => response.json());
}

// 데이터를 HTML로 렌더링하는 함수
function renderTemplate(data) {
  return `
    <div>
      <h1>${data.title}</h1>
      <p>${data.content}</p>
    </div>
  `;
}

// 클라이언트 측에서 추가적인 동작을 처리하는 함수
function handleAdditionalActions(html) {
  // HTML을 DOM에 추가
  const container = document.querySelector('#content');
  container.innerHTML = html;

  // 추가적인 이벤트 처리 등
  // ...
}

위 예제 코드에서는 Turbolinks의 turbolinks:load 이벤트를 활용하여 페이지 로드 시 초기화 작업을 수행합니다. 서버로부터 데이터를 가져와 템플릿을 사용하여 HTML로 렌더링한 후에 Turbolinks를 사용하여 페이지를 전환합니다. 마지막으로 클라이언트 측에서 추가적인 동작을 처리합니다.

서버 사이드 렌더링을 통해 초기 로딩 속도와 SEO 문제를 개선할 수 있으며, Turbolinks를 사용하면 SPA와 서버 사이드 렌더링을 함께 사용하는 경우에도 효과적으로 개발할 수 있습니다.

더 많은 정보를 원한다면, #JavaScript와 #Turbolinks를 참고하세요.

© 2018 Colin. All rights reserved.