Next.js, SSR 그리고 SPA
React도 그렇고 React Native도 그렇고 처음 프로젝트를 만듬과 동시에 해당 프레임워크에 대해서 깊게 알고자 한 적이 없다.
아니 없다기보다, 알고는 싶으나 머릿속에 잘 안그려지거나 그럴 여유가 없었다.
하지만 이번 Next.js 프로젝트는 완성도가 높아야 하는 작업이기 때문에, 공부와 동시에 개발을 진행하려 한다.
여유를 가지자 나 자식아..
그러니 일단 Next.js 프로젝트를 생성하기 전에 이 프레임워크에 대해 알아보도록 한다.
👋Next.js, 너 누구?
Next.js는 SPA(single page application)인 리액트에서 SSR(server side rendering)을 할 수 있게 구현이 되어있는 프레임워크이다.
SPA는 무엇이고 SSR은 무엇인가?
☄️SSR vs SPA
SSR(Server Side Rendering) 은 지금보다 예전의 웹페이지 뷰를 렌더하는 방식이다.
새로고침이나 다른 Url로 이동하면 새로운 페이지에 대한 정보를 서버에 요청하고 해당 페이지 내용을 서버로부터 받아와서 렌더링 시키는 방식이다.
새로운 페이지에 들어가면 새로운 페이지를 서버에서 받아온다
옛날에 생각하기엔 당연한 방식이었지만, 점점 웹에서 제공되는 정보량이 많아지고, 데스크탑보다 성능이 낮은 핸드폰이 등장함으로,
핸드폰으로 웹사이트를 볼때 반응이 늦어진다는 단점이 보였고, 결국 이런 배경을 바탕으로 SPA 가 등장하게 되었다!
SPA(Single Page Application) 는 CSR(client side rendering) 이라고도 한다.
SPA는 웹사이트에 입장을 하게 될 때 웹사이트의 전체 js를 다운 받아오고, 해당 페이지에서 원하는 데이터만 보여준다.
SSR의 대체제로 앵귤러JS 등 SPA 프레임워크들이 등장했다.
하지만 SPA 프레임워크라고 하여도 클라이언트가 점점 무거워지게 되었고,
결론적으로 view만 관리하자는 철학을 가진 리액트JS가 등장하게 되었습니다. 그럼에도 불구하고 초반에 전체js를 받아오려보니 초기페이지 렌더까지 시간이 오래 걸린다는 문제가 있었다.
그 뿐만아니라 SPA은 View를 생성하기 위해 자바스크립트를 실행해야되는데, 대부분의 웹크롤러 봇들은 HTML에서만 콘텐츠를 수집하고, 자바스크립트 파일은 읽지 못해 SPA를 빈페이지로 인식되는 SEO에 큰 걸림돌이 되어버린 것이다..
그렇기 때문에, 대부분의 프로젝트들이 SEO 최적화를 위해 Next.js 로 프로젝트를 작업할거라 생각한다.
크게 이 두가지 문제를 해결하는 수단이기 때문에,
SPA의 장점에 SSR에 장점을 합친 프레임워크인 Next.js를 사용하게 되는 것이다. .