Mongoose + Next.js Server Action과 객체 직렬화

Table of contents

MongoDB의 ObjectId 직렬화 문제

Next.js 14버전의 Server Action을 Client Component에서 호출하고 ObjectId가 포함된 객체가 반환되는 경우 ObjectId는 JSON Serializable 하지 않다는 오류가 발생한다.

My Frame 프로젝트에서 발생한 문제인데, 이미지 상세 페이지의 경로에 해당 이미지의 ObjectId 값이 필요하기 때문에 이 값을 문자열로 변환해서 전달해야 한다.

기존의 ImageInterface를 확장한 SerializedImageInterface를 만들고, 직렬화 불가능한 타입의 속성을 전부 string으로 바꾸어 주었다.

// mongoose 스키마의 제너릭 타입으로 사용되는 인터페이스
export interface ImageInterface {
    url: string;
    width: number;
    height: number;
    title: string;
    description: string;
    tags: string[];
    owner: Types.ObjectId;
    uploadedAt: Date;
    likes?: number;
    comments?: IComment[];
    visibility: 'public' | 'follow' | 'private';
}

// 서버 - 클라이언트 간의 전달이 가능하도록 직렬화 가능한 타입으로 구성.
// service 함수를 server action으로 바로 사용하려면 반환 값이 직렬화 가능해야 함.
export interface SerializedImageInterface extends Omit<ImageInterface, 'id' | 'owner' | 'comments'> {
    id: string;
    owner: string;
    comments: ISerializedComment[];
}

이후 SerializedImageInterface를 클라이언트 컴포넌트에서 사용하는 함수의 반환 값에 적용한다.

다른 해결방안

https://github.com/flightcontrolhq/superjson

직렬화 문제를 해결해주는 superjson이라는 라이브러리가 있다고 한다.

https://github.com/flightcontrolhq/superjson/issues/69

서버 단에서 직렬화하고 클라이언트 단에서 다시 비직렬화 하는 식으로 사용하면 위처럼 인터페이스를 추가로 정의하고 적용하는 것 보다 깔끔하게 해결할 수 있을것 같다. 만약 위 인터페이스 방식을 적용하기 힘들어지면 고려해 볼 수 있겠다.