Next.js 와 SSR

유원근·2020년 12월 13일

Theory nextjs

Next.js 후루룩

목록 보기

1/2

로고마져 멋있는 Next.js ...

Next.js?

next.js 는 리액트를 사용할때 정적 웹 사이트 즉, SSR (Server Side Rendering) 을 쉽게 할 수 있도록 도와주는 React기반의 프레임워크입니다.

장점

webpack과 babel을 활용한 번들링 최적화
빠른 속도
정적파일 경로 제공
타입스크립트 지원
SSR지원
라우팅기능 지원

이밖에도 정말정말 많은 장점을 가지고 있는 Next.js입니다.
물론 저는 SSR을 적용하지 않을것이라면 일반 React.js를 사용할 것이에요 ^^

이제 Next.js에 대하여 알아볼까요?

Why Next.js?

Next.js에 대하여 알아보기에 앞서 Next.js가 왜 필요한지를 먼저 알아야겠죠?
혹시 SSR, Server Side Rendering이라는 것에 대하여 들어보셨나요?
JSP와 Servlet을 이용하여 개발을 한번이라도 진행해 보셨다면, 이미 SSR을 해본 경험이 있다는 것을 의미합니다!

SSR

Server Side Rendering 즉, SSR은 서버측에서 사용자에게 보여줄 페이지를 모두 완성해서 보내주는 방식입니다.
JSP/Servlet의 아키텍처에서도 서버측에서 JSP파일을 컴파일해서 사용자측에 보내주니 SSR방식이 적용이 된 것이죠!

SSR특징

SSR방식을 선택하게되면 페이지에 들어있어야 하는 모든 데이터가 적용된 페이지가 사용자에게 바로 보여지게됩니다.
즉, 서버측에서 이미 페이지를 완성시켜서 보여주기 때문에 클라이언트 측에서 페이지를 구성해야 하는 CSR 즉, Client Side Rendering보다 페이지를 구성하는 속도는 늦지만, 그 완료시점이 빠르다는 장점을 가지고 있습니다.
또한, 검색엔진은 HTML을 분석하기 때문에 검색엔진 최적화 SEO(search engine optimization)도 쉽게 할 수 있다는 장점이 있습니다.

SEO
방문객을 늘릴수 있도록 검색결과의 상단에 노출될 수 있도록 하는 작업

검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것

이밖에도 Sementic Tag등을 잘 활용하면 유리해진다.

SSR vs CSR

CSR 즉, Client Side Rendering은 사용자측에서 그때그때 페이지를 구성해서 보여주게 됩니다.
React나 Angular, Vue등의 SPA (Single Page Application) 들이 이에 해당하게 됩니다.

SPA
단일 페이지 애플리케이션으로, 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션이다. 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와준다.

비어있는 HTML문서위에 사용자의 요청에 따라 필요한 내용들을 JavaScript를 이용해 보여주는 형식이기 때문에 초기에 페이지를 로드 받는 시간은 짧지만, 최종완성 시간은 길다는 단점을 가지고 있습니다.
그럼에도 최근에 많이 사용하는 이유는 여러가지 이유가 있겠지만, 사용자 입장에서 그 시간이 짧게 느껴지도록 만드는 요소들을 넣어줄 수 있기 때문이라는 느낌도 있습니다.

마지막으로 개인적인 의견으로는 모든 사이트에 SSR로 얻어지는
SEO와 같은 장점이 필요하지는 않을것 같다는 생각입니다.

위 사진에서 볼 수 있듯이, SSR은 서버측에서 구성이 완료된 페이지를 가져와 JS파일을 다운받아 적용시켜줍니다.
반면 CSR은 다음과 같습니다.

서버에서 빈페이지를 받아온뒤 js파일을 다운받고, React를 이용해 사용자 측면에서 페이지구성을 완료시켜 줍니다.

정리하자면

SSR은 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라지고, SEO또한 쉬워집니다.

CSR은 SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려집니다.

지금까지의 내용만 살펴본다면 SSR이 무조건 더 좋은거 아닌가? 라는 생각이 들 수도 있지만 SSR이 CSR에 비해 성능이 우수한 면도 있지만 모든 면에서 SSR이 CSR보다 우수하지는 않습니다.
일단 SPA와 같은 경우에는 사용자가 웹을 쓰면서도 데스크톱 애플리케이션과 같은 사용성을 제공해줍니다.

또한 과거의 개발방식과는 다르게 2016년이후에 프론트엔드의 생태계가 너무 빠른 속도로 발전하면서 react, vue, angular2등의 프레임워크, Webpack과 같은 프론트엔드의 생태계가 구축됨에 따라 프론트앤드 서버와 백앤드 서버를 따로 분리하는 개발과정 또한 이제는 너무 당연시 되고 있는게 사실입니다.

또한 SSR의 장점중 하나인 SEO는 다른 방식을 통해서도 적용시켜 줄 수 있으며, SPA프로젝트를 진행하더라고 SSR을 사용해줄 수 있기 때문에, CSR이 가져다 주는 큰 이익과 SSR의 장점을 잘 융합시킬 수 있다고 생각합니다.