getServerSideProps

Next.js 프레임워크 라우팅 구조와 데이터 패칭

✔️ Next.js 프레임워크의 라우팅 구조와 데이터 패칭에 대해 살펴보자 페이지 라우트 구조페이지 라우터 구조는 pages라는 디렉토리 하위의 경로에 따라서 라우터 구조를 자동으로 가져가고 있다. Next.js를 템플릿을 사용해서 프로젝트를 시작을 하면 pages라는 디렉토리가 기본으로 만들어지게 된다. 해당 디렉토리 하위에 폴더도 만들 수 있고 파일도 만들 수 있다./pages/index.tsx : 웹 사이트의 루트(localhost:3000)/pages/hello.tsx : 경로는 /hello 로 접근할 수 있다(localhost:3000/hello)/pages/hello/[id].tsx : 대괄호 [] 는 여기에 어떠한 문자도 올 수 있음을 의미한다/pages/hello/123/pages/hell..

[Next.js] Pre-Rendering

Pre-Rendering에 들어가기 전, SPA의 특성을 먼저 생각해보자. SPA (Single Page Application)은 처음이 느리고 그 다음부터 빠르다. SPA에서는 사용자가 실제 컨텐츠를 보려면 서버로 요청을 한 뒤에 HTML, JS, ASSETS 파일을 다 다운 받기 전 까지 대기해야한다. 그리고 다 다운받고 난 뒤 JavaScript를 이용해서 매 화면의 컨텐츠를 동적으로 바꾼다. 이러한 것들이 SPA를 느리게 하는 이유가 되는데, 이런 문제를 해결하기 위해서는 SSR위에 HTML 파일을 반환해줄 서버를 둬야한다. Next.js에서는 이런 문제를 Pre-Rendering으로 SSR보다 복잡하지 않은 비용으로 해결할 수 있다. Next.js의 Pre-Rendering React는 CSR로..