개인적으로 next.js를 사용하여 간단한 프로젝트를 진행하면서,
이번에야 말로 vercel과 postgre를 한번 사용해보겠다고 마음을 먹었다.
연동까지도 잘됐고, 배포도 성공적으로 완료했는데.. 문제는 postgre와의 연결? 이였다.
분명 데이터베이스에 제대로 접근을 했고, 테이블 생성도 확인되었고,
최초 insert나 select 쿼리도 정상동작을 하는데,
뭔가 최초 이후엔 예전 데이터를 내뱉거나(최대 12시간정도 된것 같다)
여튼 그런 오래된 데이터가 노출되거나 update쿼리가 제대로 반영 안되는 문제가 있었다.
vercel 대시보드에서 query를 실행하면 제대로 작동하고, 실제 내 앱에서 호출을 했을때 문제가 있었다.
@vercel/postgres 관련해서 검색을 뭐라해야할지도 모르겠고.. 알음알음 검색도 해보고
챗 gpt한테 물어보니 자꾸 이상한 답변만 내놓아서 열받아서 스스로 한번 해결해보기로 했다.
처음엔 DB가 설치된 지역.. (워싱턴DC)이 너무 멀어서인가.. 해서 삭제하고, 싱가폴로 위치를 바꿔봤는데도 여전했다.
두번째로 해본 방법은 만든 테이블명이 users였기에, 뭔가 예약어 비슷한 느낌이라 안되나.. 싶어서
posts로 새로 테이블을 만들어서 해보았는데도 동일했다.
세번째로 의심한건 캐시였는데, 아예 서버를 종료했다가 켜도 동일한 문제가 발생하는걸 보니 아니다 싶었다.
네번째로, /api 폴더 내에서 서버쪽 코드를 활용하여 요청을 보냈는데,
(클라이언트 쪽은 클라이언트 컴포넌트(?)라 env정보를 불러오질 못했다.)
이게 문제인가 싶어서 use client; 를 우선 전부 지워보고, 클라이언트 단에서 호출해도..
여전히 오래된 데이터가 나왔다.
@vercel/postgres이 문제인가 싶었지만.. ORM은 사실 뭔가.. 다루기 너무 불편한 느낌이라
어찌됐던 @vercel/postgres로 해결보고 싶었다.
실제로 문제가 있었다면 @vercel/postgres관련해서 무엇이든 오류나 버그로 검색 결과가 나올것 같은데
다들 잘 쓰고 있는듯하니 좀 더 원인을 찾아보았다.
더이상 생각나는게 없어 포기할까 싶던 찰나
일단 확실한 부분부터 한번 정리 후 마지막으로 한번 더 알아보기로 했다.
1. vercel 대시보드에서 쿼리를 날려보면 제대로된 동작을 한다.
=> postgres를 처음써봐서 쿼리를 잘못쓴건 아니다.
2. 최초 실행한 쿼리들은 제대로 동작한다.
=> next.js 앱과 vercel이 제공하는 @vercel/postgres 연결 역시 잘되어있다.
위 두가지로 생각해보면 next.js 자체에서 무언가 캐싱처리가 되어 예전 데이터가 나오는것 같은데..
일단 서버를 종료했다 실행해도 동일한 결과가 나오는걸 확인한 상태여서,
아리송하긴했지만..
next.js 문서를 찾던 도중 답을 발견했다.
https://nextjs.org/docs/app/building-your-application/caching#data-cache
Building Your Application: Caching | Next.js
An overview of caching mechanisms in Next.js.
nextjs.org
결국 캐시문제가 맞았다...
https://nextjs.org/docs/app/building-your-application/caching#segment-config-options
Building Your Application: Caching | Next.js
An overview of caching mechanisms in Next.js.
nextjs.org
결과만 놓고 보자면,
해당 route.js 파일에
한줄 추가해주면 요청을 캐싱하지 않게되어 정상적으로 동작하는걸 확인하였다..
음.. 이번에 느낀건 그래도 react를 많이 다뤄봐서 next.js 또한 그냥
폴더로 라우팅이 되는..! SSL이 되는 리액트..!
이런느낌으로만 알고있었는데 조금 더 next.js의 문서를 보면서 공부를 해야겠다고 생각이 든다.
다음에 또 다른 프로젝트 진행 시 버벅거리지 않기위해,
그리고 나와 같이 며칠 허비하질 않길 바라는 마음으로 포스트를 작성해보았다.
끝.
