NextJs를 이용한 SSR / SSG 마스터 하기 - 1

• NextJs폴더 구조
  • pages폴더의 api폴더에서 백엔드 처리를 할 수 있다.
  • pages 폴더로 라우팅 처리를 할 수 있다.
  • _app.tsx는 리액트에서 index.tsx와 비슷한 기능을 하는 것 같다 props로 pages폴더에 있는 컴포넌트를 폴더명(도메인)별로 받아서 화면에 띄움
  • 동적 라우팅도 매우 편한 것 같다
    • 파일명에 [id]만 붙이면 가능했다.

 

• 나는 리액트면 리액트, 넥스트면 넥스트 문법만 쓸 수 있을 줄 알았는데 넥스트 안에서 리액트도 사용할 수 있는 구조였다.
• 또한 컴포넌트별로 CSR, SSR, SSG가 가능한 것이 아니라 데이터 통신을 할 떄 즉 api 요청을 할 때 어떤 함수로 하느냐에 따라 CSR, SSR, SSG가 가능한 것이었다.
• CSR, SSR, SSG 의 차이를 눈으로 확인했다.
  • useEffect를 사용하였을 땐 html 소스에 아무것도 찍히지 않았다
  • getServerSideProps 함수를 사용하였을 땐 데이터 값을 확인할 수 있었다
  • getStaticProps 함수를 사용하였을 떄도 데이터 값을 확인할 수 있었다
    • 그게 가능한 것은 로컬에서 페이지를 띄웠기 때문
      • 코드 편집기에서 저장하는 것이 배포전 빌드와 같은 역할을 하기 때문

 

 

 참고 문서

• https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-그리고-SSGStatic-Site-Generation-feat.-NEXT를-중심으로