GraphQL Subscriptions은 클라이언트와 서버 간의 실시간 데이터 푸쉬를 가능하게 해주는 기능입니다. 이를 활용하면 실시간 업데이트가 반영되는 웹 애플리케이션을 구축할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 활용하여 GraphQL Subscriptions를 위한 서버 사이드 렌더링에 대해 알아보도록 하겠습니다.

GraphQL Subscriptions란?

GraphQL Subscriptions는 Apollo Server와 같은 GraphQL 서버에서 지원되는 기능으로, 웹 소켓을 사용하여 클라이언트에게 실시간으로 업데이트되는 데이터를 전송합니다. 이를 통해 실시간 채팅 애플리케이션, 주식 시세 알림 등 실시간 업데이트가 필요한 기능을 구현할 수 있습니다.

서버 사이드 렌더링과 GraphQL Subscriptions

서버 사이드 렌더링은 웹 애플리케이션에서 초기 페이지를 서버에서 렌더링하여 클라이언트에게 전달하는 기술입니다. 이를 통해 초기 로딩 속도를 개선하고 SEO에 유리한 웹 애플리케이션을 구축할 수 있습니다.

GraphQL Subscriptions는 클라이언트와 서버 간의 웹 소켓 연결을 유지해야 하기 때문에, 기본적으로 서버 사이드 렌더링과 함께 사용하기 어렵다는 문제가 있습니다. 그러나 몇 가지 방법을 활용하면 이 문제를 극복할 수 있습니다.

1. 웹 소켓 연결 유지

서버 사이드 렌더링을 위해 초기 페이지를 서버에서 렌더링한 후 클라이언트에게 전달하면, 클라이언트는 웹 소켓을 통해 서버에 연결합니다. 그러나 클라이언트에게 전달된 초기 페이지는 이미 렌더링된 상태이기 때문에 웹 소켓 연결이 끊어진 후에도 실시간 업데이트가 이루어지지 않습니다.

이를 해결하기 위해 클라이언트 측에서 웹 소켓 연결을 유지해야 합니다. 서버에서 초기 페이지를 렌더링한 후 웹 소켓 연결을 유지하는 로직을 추가하여 서버와 클라이언트 간의 실시간 데이터 푸쉬를 가능하게 할 수 있습니다.

2. 서버 사이드 렌더링과 클라이언트 사이드 데이터 푸쉬

서버 사이드 렌더링과 함께 클라이언트 사이드에서도 별도의 데이터 푸쉬 기능을 추가하는 방법도 있습니다. 이를 위해 별도의 GraphQL Subscriptions 서버를 구축하고, 클라이언트에서는 서버 사이드 렌더링된 페이지를 로드한 후에도 GraphQL Subscriptions 서버에 연결하여 실시간 업데이트를 받을 수 있습니다.

마무리

GraphQL Subscriptions를 활용한 실시간 데이터 푸쉬는 웹 애플리케이션에서 실시간 업데이트가 필요한 경우 매우 유용한 기능입니다. 서버 사이드 렌더링과 함께 사용하기 위해서는 웹 소켓 연결 유지나 별도의 데이터 푸쉬 서버를 구축하는 등 몇 가지 추가 작업이 필요합니다.

더 자세한 내용은 GraphQL Subscriptions 문서를 참고하시기 바랍니다.

#GraphQL #서버사이드렌더링