[Next.js] 사전 렌더링 Serializing Error / JSON, 직렬화, SSR

[Next.js_pre-rendering]

 

---

 

<STUDY>

 

Serializing Error

 

Next.js의 서버 사이드 렌더링(사전 렌더링)을 통해 client로 데이터를 전달하는 과정에서 Serializing Error가 발생했다.

무슨 오류인지 찾아보니 데이터를 JSON으로 변환하는 과정에서 발생하는 오류라고 한다.

 

1️⃣ 원인

 

Next.js의 사전 렌더링 함수를 이용하여 데이터를 props로 보내는 경우 JSON 형태로 전달된다.

 

Json은 데이터 교한을 목적으로 만들어져 특정 언어에 종속되지 않는다는 특징이 있는데,

때문에 특정 언어에 종속되는 객체는 JSON으로 변환(Serializing, 직렬화)할 수 없다고 한다.

 

전달하는 데이터 중 Timestamp 데이터가 존재했는데 Timestamp는 Javascript에서 Date 객체로 취급된다.

 

그래서 Serializing Error가 발생했던 것!!

 

 

2️⃣ 해결

 

이를 해결하기 위해 getServerSideProps 함수 내에 Date 객체만 따로 처리하는 로직을 추가한다.

 

- 변경 전

// Component ...

export const getServerSideProps = async (context) => {
  const data = await getData(); // 데이터 받아오는 로직

  return {
    props: { data },
  };
};

 

- 변경 후

// Component...

export const getServerSideProps = async (context) => {
  const result = await getData();
  const newDate = new Date(result.timestamp); 
  
  const data = {
    ...result,
    date: newDate.toString(), // type 변경 (object → string)
  };

  return {
    props: { data },
  };
};

 

---

Date 객체가 자바스크립트 객체라서 JSON으로 변환할 수 없다는 사실을 처음 알았다.

뭔가 반성하게 된다...(? ㅎㅎ...

 

Next.js를 사용하면서 부족한 부분이 많다는 것이 많이 느껴진다.

다시 열심히 공부해야겠다 ..!

뽜이팅!

 

---

👉ez1n github 구경하기👈 

 

ez1n - Overview