공감병동 링크
배포를 마무리했지만, 고치고 싶은 내용들은 산더미처럼 쌓여있다.
특히, 속도 문제 때문에 배포 환경을 바꿔보는 등의 시도를 해 볼 계획이다.
그래도 근 한달간 작업하면서 느낀 점과 배운 점을 각 카테고리로 나누어서 정리해보도록 하겠다.
Overview
만족스러운 점
1. 각 페이지 별 정확한 라우팅
- 글 예시
- 글을 쓸때, 서버측에서 타이틀을 기반으로 slug를 만들어서 DB에 저장하고
- 글을 클릭할 때 detail페이지에서
detail/[slug]로 라우팅되게 함serverSideProps안에서 해당 slug를 DB에 보내서 글 데이터를 받아 props로 전달- 받은 글 데이터를 랜더링
하는 방식으로 구성했다. 덕분에 각 글마다 하나의 유니크한 페이지 주소를 갖게 된 점이 만족스러웠다.
- 글 둘러보기 예시
위와 비슷한 방식으로 이 역시 각각의 유니크한 주소를 가질 수 있도록 구성했다.
2. 정확한 html
next.js를 최대한 활용하여 대부분의 페이지를(개인 정보 수정 제외) SSG / SSR로 구성하였기 때문에, 실제 html이 프론트 서버에서 다 그려져서 내려와 높은 SEO 점수를 받을 수 있게 되었다.
3. 디테일하게 신경 쓴 CSS
테일윈드를 이용해서 sm, md, lg의 반응형을 모든 페이지에서 구현한 점
검색 페이지 예시 - 검색 중인 글만 색이 들어올 수 있는 디테일도 구현했다.
검색 페이지 구현 글에 자세히 적어두었다.
아쉬운 점
1. 의문의 느린 TTFB
- 로컬 - 20ms ~ 50ms
- 배포 환경 - 1.4s ~ 2.0s
이해가 안되는 현상이었다. Vercel로 프론트 서버를 배포하고, AWS로 백 서버를 올렸는데, 같은 페이짐에도 불구하고 둘 간의 TTFB 차이가 엄청 컸다. 1초라는 시간이 이렇게 길었나 싶은 생각이 들만큼 답답했다.
html을 다 내려주어도 그게 띄워지는 속도가 느리면 SEO점수를 높게 받지 못한다고 한다. 실제로 로컬에서 개발할 때와 배포된 환경에서 내가 느끼는 답답함도 무척이나 컸다. 반드시 해결하고 넘어가고 싶다.
해결했다! TTFB 줄이기..! 이 글에 자세히 적어두겠지만, 사실 정확한 원인은 불명이다. Vercel 프론트 서버에서 요청과 응답 간 딜레이가 커서 일어나는 현상이었다.(이게 왜 그랬던 건지는 잘 모르겠다.) 백엔드 서버를 배포한 EC2에서 프론트 환경도 함께 배포를 하니 해결되었다.
2. 로딩 화면
거슬리는 깜빡임..
데이터를 페칭하는 곳이 많음에도 불구하고, 구현과 페칭 로직에만 신경쓰다보니(처음 해보는 SSR이라 더 신경이 쓰였던 것 같다.) 데이터가 오지 않은 곳은 따로 처리해두었지만, UI적으로 중요한 로딩 화면을 구현하지 못했다. 리팩토링하면서 꼭 추가해놓을 예정이다.
3. 글 목록 페이지네이션 혹은 무한 스크롤
현재는 특정 글에 대해 limit를 주어서 일정한 양의 글 데이터만 불러와지도록 되어있다. 라우팅에 따른 데이터 페칭를 우선적으로 처리하고 싶어서 구현 과정에서는 잠시 제쳐두었던 기능인데, 이게 없는 것은 글을 보는 사이트 특성상 알맞지 않은 것 같다는 찝찝함이 남는다. 리팩토링 1순위라고 볼 수 있겠다..!
