Next.JS SSR 환경에서 쿠키를 활용하는 방법이 뭐가 있을까?

웹 애플리케이션을 개발하다 보면, 사용자 인증은 필수적인 요소 중 하나입니다. 최근 프로젝트를 진행하며 Next.js와 Express 서버를 통해 사용자 인증을 구현하던 중, SSR 환경에서 쿠키를 어떻게 활용해야 할지에 대해 고민하게 되었습니다. 이번 글에서는 그 과정을 공유하며, 제가 겪었던 문제와 이를 해결한 방법을 소개하려 합니다.

배경

제가 진행했던 프로젝트는 Next.js를 프론트엔드로, Express를 백엔드로 사용하는 구조였습니다. 사용자 인증을 위해 JWT(Json Web Token)를 활용했으며, 인증 토큰을 브라우저 쿠키에 저장하도록 설계했습니다.

처음에는 브라우저 환경에서 API 호출이 잘 작동하여 문제없다고 생각했습니다. 하지만 SSR(Server-Side Rendering) 환경에서 인증이 필요한 API를 호출할 때 문제가 발생했습니다. 바로 쿠키가 서버 요청에 포함되지 않는 문제였죠.

쿠키의 동작

왜 브라우저에서 받아온 쿠키를 SSR에서 사용할 수 없을까?

쿠키는 기본적으로 같은 도메인에서만 자동으로 전송됩니다. 브라우저에서 API를 호출하면, 쿠키는 API의 도메인에 따라 자동으로 포함됩니다. 예를 들어:

• 브라우저에서 https://api.example.com으로 요청하면, 해당 도메인에 설정된 쿠키가 포함됩니다.

하지만 SSR에서는 Next.js 서버에서 API 요청을 수행합니다. Next.js 서버의 도메인은 https://next.example.com일 수 있고, 이 경우 브라우저에서 저장된 https://api.example.com의 쿠키는 Next.js 서버의 요청에 포함되지 않습니다. 이런 도메인 차이 때문에 SSR 환경에서 쿠키를 활용할 수 없었던 것입니다.

HTTPOnly 쿠키와 보안

HTTPOnly 쿠키는 JavaScript에서 접근할 수 없도록 설정된 쿠키입니다. 이를 활용하면 클라이언트 사이드에서 쿠키를 도난당할 위험을 줄일 수 있습니다. 하지만 이런 쿠키도 기본적으로 도메인 기반으로 저장되기 때문에, 도메인이 다른 SSR 요청에서는 자동으로 전송되지 않는 한계가 있습니다.

CSR과 SSR의 차이

CSR(Client-Side Rendering) 환경에서는 브라우저가 직접 백엔드에 요청을 보냅니다. 따라서 쿠키가 백엔드 도메인에 저장되더라도 문제가 되지 않습니다. 모든 요청이 브라우저를 통해 이루어지기 때문입니다.

반면, SSR(Server-Side Rendering) 환경에서는 Next.js 서버가 백엔드에 요청을 대신 보내므로, 브라우저에서 저장된 쿠키가 SSR 요청에 포함되지 않습니다. 이번 프로젝트에서 이 차이가 문제의 핵심이 되었고, 이를 해결하기 위해 도메인 통합이 필요했습니다.

해결 방법

리라이트를 활용한 쿠키 도메인 통합

이 문제를 해결하기 위해 저는 Next.js의 리라이트 기능을 사용했습니다. 리라이트는 클라이언트와 백엔드 사이의 프록시 역할을 해주는 기능으로, 브라우저가 직접 백엔드 API를 호출하지 않고 Next.js 서버를 경유하도록 설정할 수 있습니다. 이를 통해 쿠키의 도메인을 Next.js 서버로 통일했습니다.

구현 방법

1. Next.js의 next.config.js에 리라이트 설정 추가위 코드는 /api로 시작하는 모든 요청을 Next.js 서버가 대신 받아 백엔드로 전달하도록 설정합니다.
2. 브라우저에서 쿠키를 Next.js 서버로 저장 클라이언트 요청은 이제 https://next.example.com/api로 이루어지며, 쿠키는 Next.js 서버의 도메인에 저장됩니다.
3. SSR에서 쿠키 활용 SSR 환경에서도 Next.js 서버의 도메인에 저장된 쿠키를 활용할 수 있으므로, 요청 시 인증 토큰을 자동으로 포함할 수 있습니다.

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*', // 백엔드 API URL
      },
    ];
  },
};

리라이트의 장점

• 쿠키의 도메인 통일: 클라이언트와 서버가 동일한 도메인을 사용하므로 쿠키를 SSR에서도 활용할 수 있습니다.
• 보안 강화: 클라이언트가 백엔드와 직접 통신하지 않아 민감한 정보가 노출될 위험이 줄어듭니다.

결론

이번 글에서는 SSR 환경에서 쿠키를 활용할 때 발생하는 문제와 이를 해결하기 위한 Next.js 리라이트 기능의 활용법을 소개했습니다. 프로젝트를 진행하며 고민한 이 과정이 비슷한 문제를 겪는 개발자들에게 도움이 되길 바랍니다. 혹시 더 좋은 방법이나 개선 아이디어가 있다면, 댓글로 공유해주세요!

 

다음 주제의 글은 추가적으로 소셜로그인의 활용에서 발생한 문제와 해결방법도 다루어 보겠습니다.