about spa

spa

항공대 소프트웨어학과 사업부 사이트 제작을 하던 와중, 프론트 분야의 spa와 csr & ssr 에 대해서 궁금해서 찾아보았다.

spa, mpa

• spa : single page application - 한 개의 페이지로 구성되는 어플리케이션
• mpa : muultiple page application - 여러개의 패이지로 구성되는 어플리케이션

rendering

렌더링이란, 브라우저 화면에 html 소스를 띄우는 작업이다. 이 작업을 누가 하냐에 따라 csr(client side rendering) 인지 ssr(server side rendering) 인지 결정난다. csr 같은 경우는 서버가 데이터만 클라이언트로 보내고 클라이언트가 이를 바탕으로 렌더링을 한다. 반면에 ssr 같은 경우는 서버에서 html, css, data 등 각종 소스들을 렌더링하여 클라이언트에 보내준다. 초기에는 ssr 이 대부분이었지만, csr 이 각광받는 추세를 보인다.

SEO

seo, search engine optimization 검색엔진 최적화
검색엔진에 웹 어플리케이션이 잡히게 하려면 ssr을 해야한다고 한다. 이게 무슨말이지?
기본적으로 웹 크롤러는 JS를 지원하지 않는다고 한다. (구글은 제외!) csr방식은 클라이언트가 JS를 통해 html 컨텐츠를 생성한다. 하지만 웹 크롤러가 JS를 지원하지 않는다면, 컨텐츠를 생성할 수 없게 되는 것이다. 즉 seo를 위해서 ssr방식(서버에서 모든 컨텐츠를 클라이언트로 보내주고 클라이언트는 해당 데이터를 보여주기만 한다.)으로 개발을 진행해야 한다.

react.js & next.js

프론트에 대해 잘은 모르지만, spa는 csr 기반으로 작동한다고 알고 있다. 하지만 seo문제 때문에 요즘에는 초기 렌더링은 ssr방식으로 진행하고 그 이후에는 csr방식으로 속도를 높인다고 한다.

react로만 개발을 한다면 ssr 기반의 웹을 구축하기 힘들다. 그래서 프론트엔드 개발자들이 nodejs, next.js, nust.js 등을 이용하여 ssr 방식으로 웹을 구축한다. Next.js는 다음과 같은 방식으로 작동한다.

1. 사용자가 처음 페이지를 접속을 요청 했을때 Next.js 서버는 사용자에게 랜더링될 HTML을 응답 값으로 보내준다. (SSR 방식)
2. 그 후 브라우저는 추가적인 자바스크립트 번들을 다운로드 받아 실행한다.
3. 사용자가 해당 페이지에서 다른 페이지로 이동할때는 Next.js에 서버가 아닌 브라우저에서 처리하여 이동하게 한다. (CSR 방식)

이와 같이 백엔드 개발자가 프론트 쪽은 신경쓰지 않고, 온전히 서버에 집중을 할 수 있도록 되어있다. 즉, 백엔드 개발자와 프론트엔드 개발자는 api를 통해 데이터만 주고 받는다고 할 수 있다.

참고자료