[nodejs] SSR과 프로그레시브 이미지 렌더링

19 Dec 2023

nodejs

SSR은 웹 애플리케이션의 성능을 향상시키는 데 중요한 역할을 합니다. 프로그레시브 이미지 렌더링은 사용자 경험을 향상시키는 기술 중 하나입니다. 이 두 가지 기술이 어떻게 상호 작용하는지 살펴보겠습니다.

SSR (Server-Side Rendering)

일반적으로, 웹 애플리케이션은 클라이언트 측에서 렌더링됩니다. 즉, 서버는 HTML, CSS 및 JavaScript와 같은 정적 자원을 클라이언트에게 제공하고, 클라이언트 측에서 해당 자원을 사용하여 화면을 렌더링합니다. 그러나 SSR은 서버에서 렌더링된 HTML을 클라이언트에게 전달하여 초기 페이지 로드 성능을 향상시키고 SEO (Search Engine Optimization)를 개선합니다.

SSR을 적용하면, 사용자가 앱에 접근할 때 서버는 그에 맞는 HTML을 렌더링하여 제공하므로, 초기 로딩 시간을 줄이고 콘텐츠가 검색 엔진에서 더 잘 색인됩니다.

// Example SSR in Node.js using Express
app.get('/', async (req, res) => {
  const html = await renderer.renderToString(context);
  res.send(html);
});

프로그레시브 이미지 렌더링

프로그레시브 이미지 렌더링은 이미지를 단계적으로 로드하여 사용자 경험을 향상시키는 기술입니다. 이미지를 저해상도에서 고해상도로 천천히 로드함으로써, 페이지의 로드 속도를 높이고 사용자가 이미지를 기다리지 않아도 되도록 합니다.

<!-- Example of progressive image rendering -->
<img src="thumbnail.jpg" loading="lazy" />

SSR과 프로그레시브 이미지 렌더링의 결합

SSR과 프로그레시브 이미지 렌더링을 결합하면 초기 렌더링 성능을 향상시키고 사용자 경험을 최적화할 수 있습니다. SSR로 인해 초기 페이지 로드 시간이 단축되면, 프로그레시브 이미지 렌더링은 이미지 로딩 과정을 조정하여 사용자가 더 나은 경험을 할 수 있게 합니다.

이와 같이, SSR과 프로그레시브 이미지 렌더링은 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 데 도움이 됩니다.

SSR (Server-Side Rendering)

프로그레시브 이미지 렌더링

SSR과 프로그레시브 이미지 렌더링의 결합

참고 자료