서버 사이드 렌더링(SSR)은 웹 애플리케이션의 초기 렌더링을 서버에서 수행하여 클라이언트로 보내는 방법입니다. SSR의 장점 중 하나는 초기 페이지 로드 시간을 줄일 수 있다는 것입니다. 클라이언트가 매번 동일한 페이지를 요청할 때마다 서버에서 페이지를 다시 렌더링할 필요가 없기 때문에 클라이언트 캐시를 이용하여 렌더링된 페이지를 저장하는 것이 중요합니다.
클라이언트 캐시 설정
Express와 같은 Node.js 웹 프레임워크에서는 클라이언트 캐시를 설정하기가 매우 간단합니다. res.set 또는 res.header 메서드를 사용하여 HTTP 응답 헤더를 설정할 수 있습니다.
app.get('/some-route', (req, res) => {
// ... 서버 사이드 렌더링 수행
res.set('Cache-Control', 'public, max-age=300'); // 5분 동안 클라이언트 캐시 유지
res.send(renderedPage);
});
위 코드에서 Cache-Control 헤더의 max-age 속성은 클라이언트에서 페이지를 캐시하는 시간을 나타냅니다. 또한 브라우저와 서버 간 트래픽을 줄이고 네트워크 성능을 향상시킬 수 있습니다.
클라이언트 캐시 유효성 검사
클라이언트는 캐시된 페이지의 유효성을 검사하기 위해 If-None-Match 또는 If-Modified-Since와 같은 조건부 요청을 보낼 수 있습니다. 서버는 이러한 요청에 대응하여 페이지가 변경되지 않았을 때 304 Not Modified 응답을 반환하여 변경된 페이지가 없음을 알려줄 수 있습니다.
결론
SSR을 사용하는 경우 클라이언트 캐시를 올바르게 설정하는 것은 웹 애플리케이션의 성능을 향상시키는 데 중요합니다. 클라이언트 캐시는 네트워크 트래픽을 줄이고 페이지 로딩 시간을 단축시킵니다. 올바른 클라이언트 캐시 설정은 웹 애플리케이션의 사용자 경험을 개선하는 데 도움이 될 것입니다.