Home, Posts, 그리고 각 게시글 페이지의 데이터를 Dynamic Content로 전환하였다. 기존에는 서버 상에서 게시글 파일(mdx)을 Build time에 렌더링하여 Static하게 콘텐츠를 제공하였으나, 이번에 서버에서 DB로부터 게시글 데이터(MDX 소스)를 가져와 Run-time에 렌더링하여 제공하는 것으로 변경하였다. 댓글 및 좋아요 데이터 또한 같은 방식으로 전환하였다. 게시글 관련 데이터를 위하여 PostgreSQL 기반의 플랫폼인 Supabase에서 DB를 구성하였고, Home 페이지의 데이터를 위하여 Upstash의 Redis를 이용하였다. 게시글 속 이미지의 저장을 위해 Supabase Storage를 이용하였다.
게시글 작성을 위한 페이지를 따로 만들었다. 관리자인 나만 접근할 수 있다.
Next.js의 Server Components를 이용한 SSR을 Home, Posts, 그리고 각 게시글 페이지에 적용하였다. 해당 페이지들에 대해서는 페이지 요청 시 DB로부터 데이터를 fetch하고 서버 상에서 기본적인 렌더링을 수행한다. 레이아웃을 구성하는 데 CSR(Client-Side Rendering)이 필요한 곳이 있어, 레이아웃 컴포넌트(Client Component)를 따로 정의하고, 서버 상에서 렌더링된 데이터를 레이아웃 컴포넌트로 props를 이용해 넘겨주었다.
결과적으로 CSR만 사용했을 때에 비하여 SEO 향상, 초기 로딩 시간 개선을 이루었다.
게시글 작성 시 드래그 앤 드롭으로 이미지를 업로드 할 수 있게 하였다. 게시글 내용 작성 공간에 이미지 파일을 드롭하면, DB(Supabase)로 해당 파일을 업로드하고, 업로드한 파일의 URL를 얻어와 현재 커서 위치에 마크다운 형태로 삽입되도록 하였다.
좋아요 버튼 및 댓글 섹션에 React Query를 이용하여 Optimistic UI를 구현 및 적용하였다. 구체적으로 React Query의 useMutation, invalidateQueries 등을 이용하였다.
(추가 예정 / To be added)