SSR 2

[Next13] 인증 상태에 따른 페이지 리다이렉트 / 로그인, cookie, middleware

[Next13_middleware] 인증 여부에 따른 페이지 리다이렉트를 구현하고싶다@! 로그인이 되어있지 않은 유저가 접속할 때 로그인 페이지로 이동하는 과정에서 새로고침을 하는 경우에 메인 페이지가 보였다가 로그인 페이지로 이동하는 깜빡임 현상이 발생했다. 이 문제를 해결하기 위해 많은 고민을 했는데, 결론부터 이야기 하자면 cookie + Next.js의 middleware를 사용하여 해결하였다. 그래서 그동안 시도했던 방법들을 소개하려고 한다. 👉 cookie + middleware 바로 보기👈 1️⃣ localStorage 로그인 했을 때 localStorage에 로그인 정보를 저장하여 로그인 여부를 판별하는 방법이다. import {useRoute} from 'next/navigation'; ..

STUDY/Next js 2023.10.29

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

[Next.js_pre-rendering] Next.js의 서버 사이드 렌더링(사전 렌더링)을 통해 client로 데이터를 전달하는 과정에서 Serializing Error가 발생했다. 무슨 오류인지 찾아보니 데이터를 JSON으로 변환하는 과정에서 발생하는 오류라고 한다. 1️⃣ 원인 Next.js의 사전 렌더링 함수를 이용하여 데이터를 props로 보내는 경우 JSON 형태로 전달된다. Json은 데이터 교한을 목적으로 만들어져 특정 언어에 종속되지 않는다는 특징이 있는데, 때문에 특정 언어에 종속되는 객체는 JSON으로 변환(Serializing, 직렬화)할 수 없다고 한다. 전달하는 데이터 중 Timestamp 데이터가 존재했는데 Timestamp는 Javascript에서 Date 객체로 취급된다...

STUDY/Next js 2023.07.23