Next.js 서버컴포넌트(SSR)에서 서버 통신시 쿠키 세팅 안됨이슈

Next.js로 개인프로젝트 진행 중. 서버사이드에서 백앤드 서버로 통신을 하는데 서버에서 쿠키를 찾지 못하고,

프로잭트를 hot reload하면 다시 정상적으로 동작하는 이슈가 발생했다.

1. 이슈 분석.

 const getWorkSpaceRes = await fetch(`${process.env.NEXT_PUBLIC_WORKSPACE_SERVER_URL}/workspace/${id}`,{
        headers: {
            'Content-Type': 'application/json',
        },
        credentials: 'include',
        cache: "no-store",
    })

통신 코드인데 그냥 완전 평범한 get method이고, 쿠키 사용을 위해 credentials도 포함 해주었다.

 

서버 코드를 보면 preHandler를 통해 해당 유저의 로그인정보를 확인하고, 
workspace id와, userId를 가져와 서비스를 호출한다.

fastify.get("/workspace/:id",{
        schema : {
            tags : ['workspace']
        },
        preHandler :[fastify.authenticate]
    } ,async (request, reply) => {
        try {
            const { id } = request.params as { id: string };
            const userId = request.user!.id;
            return await fastify.services.workspace.getWorkspaceById(id,userId)
        } catch (err) {
            request.log.error({ err }, "Failed to fetch workspace by id");
            return reply.status(500).send({
                ok: false,
                error: (err as Error).message,
            });
        }
    });

const accessToken = request.cookies.access_token;
                if (!accessToken) {
                    return reply.status(401).send({ ok: false, error: "토큰이 없습니다." });
                }

 

근데 이제 authenticate 코드 상에서 access_token을 찾지못해 토큰이 없다는 에러를 발생 로그인을 했음에도 workspace를 가져오지 못하는 경우가 발생.

2 . 해결 방법

해결 방법은 아주 간단하다.

const cookieStore = await cookies();
    const cookieHeader = cookieStore.toString();

    const getWorkSpaceRes = await fetch(`${process.env.NEXT_PUBLIC_WORKSPACE_SERVER_URL}/workspace/${id}`,{
        headers: {
            'Content-Type': 'application/json',
            Cookie: cookieHeader,
        },
        credentials: 'include',
        cache: "no-store",
    })

그냥 header에 쿠키를 직접 넣어서 통신을 보내면 그만이다.

 

3. 리뷰

일단 보안 문제를 생각해보면, 당연히 문제가 없을 듯하다.

단 아래 3가지정도는 고려해 봐야겠는데.

1. 서드퍼티 도메인으로 통신하는경우

2. 쿠키안에 민감한 정보 (이메일, 이름 등) 가 포함되어있는 경우

3. 쿠키를 로그/에러로 남길때,

이 세가지는 당연히 해선 안되는 경우가 되겠다. 보통 쿠키의 보안은 백앤드서버쪽에서

httpOnly , sameSite 등으로 관리하니 이렇게 header에 담는건 아무 문제 없을 듯하다.

 

+ 왜 SSR에서는 쿠키가 생기기 전에 백엔드 통신이 먼저 발생하지?

- SSR은 브라우저가 아니라 서버가 먼저 렌더링 하기 때문이다.

즉, 브라우저가 요청 → Next 서버가 렌더링 → HTML을 만든 후 보내줌
이 시점에서는, 브라우저가 아직 HTML을 받지도 않았고 JS도 실행되지 않은 상태임.

 

근데 stackoverflow에서 Session과 cookie를 함께사용하고,

쿠키 변경사항이 브라우저에 반영되지 않는다고,

next-auth같은라이브러리를 쓰라는데.

나는 fastify써서 해당 안되는듯..?

 

이 부분은 조금 더 공부를 해봐야 알듯하다.

 

https://github.com/Choi-jae-min/TaskGround/issues/34