라우팅
pages 폴더 밑에 있는 파일은 모두 빌드 시점에 html을 만들어둔다.
따라서 서버측에서 렌더링한 페이지의 html을 줄 수 있다.
CRA는 CSR방식이기 때문에 페이지가 달라도 동일한 html을 빈 상태로 주고, js 파일로 그리도록 한다.
반면 Next.js는 이미 내용이 포함된 html파일을 페이지 별로 각각 응답하므로 SEO를 개선할 수 있다.
즉, SEO가 필요한 모든 페이지는 pages 폴더 밑에 생성해주면 된다.
예를 들어,
brands/${id}
와 같이 brands 다음에 들어갈 id 파라미터에 따라 다른 데이터를 보여주는 페이지를 만들고 싶다면,
pages 하위에 brands[id].tsx 파일을 만들면 자동으로 페이지 라우팅이 된다.
혹은 brands폴더 하위에 [id].tsx를 만들어도 된다.
페이지 이동
Next.js에서 페이지 이동을 하려면 a 태그 대신 Link태그를 사용해 CSR을 하는 것이 좋다.
왜?
CSR 방식은 한 페이지에서 js파일을 이용해 여러 페이지를 그리는 것이므로 처음 로딩 시 js파일의 용량이 클수록 로딩 시간이 길어진다. 따라서 첫 페이지 렌더링에 사용하면 사용자는 빈 페이지를 보게 될 수 있다.
하지만 초기에 로딩이 이루어지고 나면 페이지 간 이동 속도가 매우 빨라지며, 새로고침도 하지 않는다. 따라서 화면 깜빡임이 없다. 또한 다운받은 js 파일에 로직이 모두 들어있어 사용자와의 인터랙션 속도다 빠르다.
추가적인 로직이 필요해 조건에 따라 페이지를 이동할 경우에는 next/Router의 Router를 사용하면 된다.
<Link href="/restaurants">
Router.push('/');Reference
