SSR 적용하기

처음에 ssr을 적용했을 때, yarn build:ssg 해서 GCP에 업로드하고, shell 켜서 docker 이미지 굽고 docker-compose-build 다 했는데 에러가 발생했다. 배포한 도메인으로 접속을 하면 페이지가 엉망진창.. 제자리에 있는 이미지도 없고 페이지 이동도 안되고..

문제의 원인은 next.js 빌드 될때마다 자동으로 압축되는 폴더/파일 이름들이 자동생성되서 변경되기때문이였다.

첫번째 방법.

프로젝트 이름이 랜덤하게 변경되는걸 잡기 위해서 generateBuildId에 이름을 적어주었다. 그리고 exportPathMap에 ssr이 아닌 모든 페이지를 적었다.

module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
  generateBuildId: () => "freeboard_frontend",
  exportPathMap: () => ({
    "/": { page: "/" },
    "/404": { page: "/404" },

    "/boards/[board_post_detail]/edit": {
      page: "/boards/[board_post_detail]/edit",
    },
    "/boards/board-post": { page: "/boards/board-post" },
    "/boards/list": { page: "/boards/list" },
    "/boards/openapi": { page: "/boards/openapi" },

    "/home": { page: "/home" },

    "/market/product-detail/[useditemId]/edit": {
      page: "/market/product-detail/[useditemId]/edit",
    },
    "/market/flickity": { page: "/market/flickity" },
    "/market/product-list": { page: "/market/product-list" },
    "/market/product-post": { page: "/market/product-post" },
  }),
}

이 방법으로 해결되지 않았는데, 지금 생각해보니 빌드 순서가 잘 못 돼서 안됐나싶다..

두번째방법

assetPrefix 경로를 설정해주었다. 그리고 Dockerfile 이미지도 다시 굽고, GCP에서 호스트 및 경로 규칙도 추가해주었다.

module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
  assetPrefix: "/ssr",
};

처음에 이 방법으로 했을 때도, 잘 안됐었다. 도커이미지 굽는데 시간도 오래걸리는데, 정말 몇번을 다시 구웠는지 모른다.

찾은 문제는 먼저 ssg 빌드 할 때, 모든 ssr에 관련된 것을 다 주석처리했다. getServerSideProp, assetPrefix .. 등등 전부 다!
이 과정을 꼭, 꼭 하고 ssg 빌드를 한 후에 GCP에 올리고 난 후에 주석한거 다 풀고 git push 한 다음 GCP에서 shell 들어가서 docker-compose-build를 해주면 된다!!!!!!!

느낀점

개인프로젝트에 SSR 적용한다고 한 과거에 나에게 후회했다. 이렇게 오래걸릴줄 몰랐고, 까다로울줄 몰랐다. 또 도커는 빌드하는데 시간은 오래걸리는 건지.. 도커에 대해서도 많이 알게되었다. 많은 시간을 쏟은 만큼 ssr은 잘 할 수 있다고... 아니.. 절대 못 잊는다.