Next.js 간단히 알아보기
Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 과거의 웹사이트들은 대부분 SSR 방식으로 동작해 왔지만 스마트폰이 대중화 되면서 기존의 웹들이 모바일에 최적화 되어있지 않아 사용에 불편함이 생기게 되었다. 그래서 사용자들은 모바일 앱과 같은 형태의 웹페이지가 필요하게 되었는데 이러한 문제를 해결하기 위해서 React, Angular, Vue 등 과 같은 라이브러리, 프레임워크가 생기게 되었고 CSR(Client Side Rendering)이 가능한 SPA가 등장하게 되었다. SPA는 Single Page Application으로 기존의 웹페이지와 다르게 1개의 페이지에서 여러 동작을 수행할 수 있어 모바일 앱과 비슷한 형태로 메뉴바는 고정되어있고 컨텐츠 영역만 계속 변경되는 방식이다. # CSR 과 SSR 비교 둘의 차이점을 확인해보자. 프론트엔드 개발자라면 누구나 한번 들어봤을 React는 CSR 방식을 이용한다. CSR 방식은 화면의 프레임 등을 먼저 렌더링한 뒤 비동기방식으로 데이터를 요청해서 불러와 화면에 데이터를 출력해준다. 이러한 방식을 사용하는 이유는 보통 사용자가 3초이내에 화면이 렌더링 되지 않으면 해당 페이지를 떠난다고 한다. 그렇기 때문에 CSR 렌더링 방식으로 하면 데이터를 불러오기 전 까지 로딩창을 보여주던지 또는 화면의 일부를 보여줌으로서 사용자를 조금이라도 더 해당페이지에 길게 머물수 있도록 도와준다. 반면에 CSR을 사용하면 한번에 모든 데이터를 불러와야하기 때문에 초기 로딩속도가 느릴 수 있다. 또한 검색엔진 최적화에 문제가 발생할 수 있다. 좋은 검색엔진의경우 해당 페이지가 CSR 방식이라는것을 알아 차리고 곧 데이터가 불러와지겠다는것을 판단할 수 있지만 좋지 못한 검색엔진의 경우 해당 페이지가 초반에 로딩 되어있을때 어떠한 데이터도 존재하지 않기 때문에 웹사이트가 검색 순위에서 밀려나는 문제가 발생할 수 있다. 반면에 SSR 방식을