Next.js 에 대하여

⁉️ 문제 상황 : ci cd 구축 과정에서 S3 와 CloudFront 를 통한 배포를 하려다 보니 정적 웹 호스팅과 관련해 next.js 동작 방식과 충돌이 생김 -> getServerSideProps 를 사용한 SSR 방식을 포함하고 있는 dynamic route 페이지들은 몽땅 build export 가 되지 않음

하지만 !
저에게는 정적 파일이 필요하단 말입니다..
그리하여 알아본 next.js 에 대하여,

스타뚜 🔥

 

** 참고 : 공식 문서

gssp-export | Next.js

next 기본 기능

Next.js | 기본기능 | Data fetching(3) | getStaticPaths

Next.js 100% 활용하기

Next.js 100% 활용하기 (feat. getInitialProps, getStaticPath, getStaticProps, getServerSideProps, storybook)

---

CSR vs SSR

CSR (Client Side Rendering)

첫 렌더링 시 페이지를 로드하고 다시 렌더링함으로써 데이터를 불러온다. 데이터가 검색엔진에 걸리지 않음(seo 이슈)

단, 한 번에 데이터를 불러오기 때문에 페이지 이동 속도가 빠르다.

 

SSR (Server Side Rendering)

첫 렌더링 시 데이터를 서버 측에서 불러와서 함께 로드한다. 초기 로딩 속도가 빠르고 검색 엔진에 데이터들이 걸리므로 seo 최적화에 용이하다. 단, 페이지를 불러올 때마다 중복 데이터를 요청하기 때문에 페이지 이동 속도가 상대적으로 느리다.

 

Next.js

SSR 기반이지만 페이지 로드 후에는 React 에서 CSR 이용하는 방식 차용

-> 페이지는 서버가 그린다. pages/ 안에 폴더를 만들면 해당 라우팅의 페이지들은 서버측에서 먼저 로드

-> 페이지 로드 이후 페이지 내부 동적 데이터 패치 과정은 CSR 방식, 페이지 로드 후 클라이언트 측에서 다시 렌더링 되므로 SEO 에 걸리지 않는다.

 

🔥 문제 직면

Next.js 공식 문서

next export 에서 지원하지 않는 features 목록

 

공식 문서에서도 언급된 바와 같이 정적 파일이 필요할 경우 next.js 에서는 next export 로만 가능하다. 하지만 next export 로 빌드 시 getServerSideProps 는 지원이 되지 않으며, getStaticPaths 와 같은 함수는 전자와 같이 사용할 수 없다. 그리고 나의 컴포넌트의 일부는 다이나믹 링크에서의 메타 태그 언어를 ssr 방식으로 취하고 있다.. ! 🥲

 

 

** 해본 방법

 

1. getServerSideProps 를 getStaticPaths 와 getStaticProps 로 바꿔보기 -> 설정하는 과정에서 아래와 같은 오류를 지속적으로 만나는 바람에 지쳐 나가떨어짐

 

 

2. 어떻게든 next export 로 빼내보기 -> index.html 은 절대 절대 생기지 않는다. build 시 Error 를 던지기 때문

3. .next 폴더의 index.js 로 접근해본다 -> cloudfront 에서 index.js 파일 그대로를 보여줌 (?)

 

 

결론

S3와 CloudFront 를 사용해서 정적 웹 호스팅을 하는 과정을 중단하기로 했다.

대신에 Vercel  (도메인 문제가 있음) 혹은 github actions 를 통해 ec2 에 직접 접근해서 배포하는 방법을 통해 우회해보기로 한다.