저번에 SSR(서버 사이드 렌더링)에 관한 글을 썼었는데 이번에는 SSR을 쉽게 구현하도록 도와주는 프레임워크인 Next.JS에 대해서 알아보려고 한다.
https://nomadcoders.co/nextjs-fundamentals/lobby
https://github.com/ctdlog/nextjs-intro
노마드코더님의 Next.JS 강의를 들으면서 간단한 무비 앱을 구현해봤고 소스코드는 깃허브에 올려두었다.
📌 그렇다면 Next.JS란 무엇일까?
Next.JS 홈페이지에 가보면 아래와 같이 설명한다.
The React Framework for Production
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed
Next.JS는 따로 설정이 필요없이 SSR, SEO부터 TypeScript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크이다.
또한, 리액트 공식문서에서도 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.JS를 권유한다.
https://ko.reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains
어쨌든 계속해서 SSR을 말하는 것 보니까 Next.JS가 SSR에 특화된 프레임워크인건 알겠다. 근데 꼭 SSR을 위해서는 Next.JS를 사용해야 할까? React로만으로는 불가능할까? 그건 아니다. 하지만 React로만 구현하는 것은 굉장히 복잡하다.
그러니까 Next.JS를 사용하자.
📌 Next.JS, 더 자세하게 알아보자
Next.JS를 사용하는 가장 큰 이유는 SSR이다. 하지만 CSR방식으로 사용하면서 SPA의 장점도 유지할 수 있다.
Next.JS의 작동원리는 다음과 같다.
- 초기에 사용자가 Server에 페이지 접속을 요청하면, SSR방식으로 렌더링 될 HTML을 보냄.
- 브라우저에서 JavaScript를 다운로드하고 React를 실행함.
- 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함.
여기서 SSR은 검색 엔진 최적화(SEO)에 중요한 역할을 한다.
근데 검색 엔진 최적화는 왜 중요할까?
예를 들어, 내가 온라인 쇼핑몰을 제작했다고 치자. 온라인 쇼핑몰에서 판매가 이루어지려면 구매 의향이 있는 사람들이 쇼핑몰에 접근할 수 있어야 한다. 좋은 상품을 팔아봤자 사용자들이 들어오지 않는다면 수익을 얻을 수가 없다. 따라서, 브라우저에 검색했을 때 쇼핑몰이 쉽게 검색되고 노출되어야 하는데 CSR은 검색 엔진 최적화에 불리하기 때문에 SSR을 구현하는 것이다.
앞선 글에서 말했듯이 CSR로 구현하면 Client 측에서 페이지 구성을 하기 전까지 HTML이 비어있다. 하지만 SSR로 구현하면 Server 측에서 화면을 그려서 보내주는 방식이기 때문에 HTML 안에 이미 컨텐츠들을 포함한다.
정리해보면, Next.JS는 SSR과 CSR의 장점을 모두 가져온 프레임워크이다.
초기에 사용자가 Server에 페이지 접속을 요청하면, SSR 방식으로 HTML을 보내줘서 SEO에 유리하고 이후 사용자와 페이지가 상호작용 할 때는 CSR방식으로 빠른 화면 전환이 가능하여 SPA의 장점도 가져간다.
Next.JS가 왜 사용되고 좋은지에 대해서 알아봤고 장점으로는 SSR만 있는 것이기 아니기 때문에 앞으로 더 자세하게 공부해보려고 한다.
