SSG

계속적으로 react만 쓰다보니 오랜만에 Next.js 쓰다가 바뀐 점이 보여 이에 대해서 서술하고자 한다.1. 구성 요소 계층 변화경로에서layout.jstemplate.jserror.js :(React 오류 경계)loading.js : (리액트 서스펜스 경계)not-found.js : (React 오류 경계)page.js중첩된 경로에서 세그먼트의 구성 요소는 부모 세그먼트의 구성 요소 안에 중첩된다 .2. 공동 배치Next.js 12에서는 pages 디렉토리를 최상위 디렉토리로 가지고 있었다. 그 안에 파일들의 이름으로 url이 자동으로 라우팅되었다.지금은 Next.js에서 app 디렉토리를 최상위 디렉토리로 지정한다. 모든 파일들이 자동으로 라우팅되는 것이 아니라, 폴더 안에 page.js와 rou..

1. CRA와 CNA 비교하기 react와 Next.js가 생성한 프로젝트를 보면 다름이 보인다. react에서는 pages폴더가 없는데, next에는 존재한다. 여기에 파일을 만들면 자동으로 라우팅되어 url에 해당 파일의 이름을 치면 해당 사이트로 이동된다. 1) 페이지 비교하기(CRA) 개발자 도구를 열어 Network 탭을 눌러, 첫 페이지의 response탭을 보면 첫 페이지 요청으로 받아온 HTML문서의 내용을 확인해볼 수 있다. 보면 우리가 App.js 파일에 적어준 내용이 하나도 들어있지 않다. id가 root인 텅 비어있는 DIV 태그만 반환하고 있음과 밑에 번들링된 static/js 경로의 'bundle.js' 파일을 전달하고 있다. CSR에서 빈 HTML 문서를 먼저 반환하고, 그 후..