SPA 어플리케이션과 SSR프레임워크 & 코드스플리팅

초기 로딩 속도가 느린 대신

프런트에서 직접 라우팅 처리 - 서버 부하 줄임

페이지 전환 빠름 & 화면 깜빡임 - 사용자 경험 개선

컴포넌트를 이용한 코드 재사용성(요즘은 웹 컴포넌트도 많이 사용하지만..) 등등...

 

많은 장점을 가지고 있는 SPA 애플리케이션이지만

 

검색 SEO, 초기 로딩 속도 등의 단점을 커버할 수 있는 프레임워크가 있다.

흔히 알고 있는 NEXT.js , NUXT.js 등의 프레임워크의 동작원리와 코드 스플리팅 & 번들의 원리에 대해서 알아보고자 하는 포스팅입니다..

작동원리 

1. 초기 사용자가 사이트에 접속 요청 > SSR방식으로 렌더링 되는 HTML 보냄

   - 초기 로딩 속도 & 검색 SEO 단점 커버

2. 브라우저에서 Javascript는 spa 애플리케이션에 필요한 것들을 다운로드

3. 초기 페이지가 아닌 다른 페이지로 이동할 땐 CSR방식으로 처리

 

여러 기능이 있겠지만 이렇게 초기 화면을 SSR방식으로 처리해 CSR의 단점인 

초기 로딩 속도 & 검색 SEO단점을 해결해주는 역할이 가장 핵심인 것 같다.

 

코드 분할(Code Splitting) 자동화

번들링

 

번들이라는 것은 묶는다는 뜻으로, 여기서 번들링이란 파일을 묶는 것이고 어째서 파일을 묶는 작업이 필요한 걸까 생각해 볼 수 있습니다.

 

정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다. 모듈(module)이란 분리된 파일입니다. 즉, 분리된 녀석들을 하나로 합쳐주는구나라고 이해할 수 있습니다.

 

그렇다면 애초부터 왜 멀쩡한 파일을 모듈로 분리했던 걸까요? 그건 작업의 효율성을 위해서입니다. 스크립트의 크기가 점점 커지고 복잡해지면서 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡성이 프로그래머가 감당할 수준이 아니게 된 거죠. 그렇기 때문에 머리, 가슴, 팔, 다리를 따로 떼어서 모듈로서 작업을 할 필요가 생긴 겁니다.

 

그렇다면 당연히 머리, 가슴, 팔, 다리 같은 각각의 모듈들은 그거 하나만으로 존재하는 독립적인 존재가 아닐 겁니다. 머리가 하나만 있다면 그냥 시체겠죠. 다른 모듈들과의 연계성을 당연히 띄어야 해요. 그래서 모듈 내부에는 import로 외부 모듈의 기능을 가져오고 export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보냅니다.

 

쉽게 말해 예전엔 페이지마다 html을 요청에 뿌려줬기 때문에 해당 html에 있는 javascript를 다운로드하면 됐지만

SPA에선 하나의 페이지에 여러 개의 자바 스클 비트 파일들이 포함된다.

 

그래서 webpack 등의 번들링 도구가 하나의 자바스크립트 파일로 만들어서(번들링 해서) 웹페이지 성능 최적화해준다.

 

이 글로 미루어보아 spa는 첫 화면에서 모든 js파일들을 다운로드하는 것은 아니라고 할 수 있을지 궁금하다...

이 질문에 답변해줄 수 있는 분은 답글로 남겨주시면 참 감사하겠다..

 

또한 bable 등의 트랜스 파일러로 es6문법을 지원하지 않는 IE 같은 브라우저에서도 es5문법으로 변환해주는 등 여러 장점이 있다!

 

참고

https://ivorycode.tistory.com/entry/Nextjs%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

Next.js를 사용하는 이유