SSR + Code Splitting

Server Side Rendering

최초 한번 페이지 전체를 로딩 후 이후부터는 데이터만 변경하여 사용 할 수 있는 웹 애플리케이션

Server-Side-Rendering 데이터 전송

브라우저가 프론트로 데이터 요청 => 프론트가 서버로 데이터요청 => 서버는 데이터베이스에서 데이터를 받아오고 프론트로 전송 => 프론트는 HTML과 데이터를 합쳐서 브라우저로 전송

Client-Side-Rendering에서의 데이터 전송

1. 브라우저가 프론트로 데이터 요청 => 프론트는 HTML을 브라우저로 전송
2. 브라우저가 서버로 데이터 요청 => 서버는 데이터베이스에서 데이터를 받아서 브라우저로 전송

==화면에 미리 뷰를 띄워주기에 체감상 로딩속도는 훨씬 빠르게 느껴진다.==

Code Splitting

앱이 커짐에 따라 용량도 같이 커지기 마련이다. 특히 큰 라이브러리를 포함한 프로젝트일경우 로딩시간에 지대한 영향을 끼치게 될 수 있다.

Code Splitting은 한개의 파일에서 처음부터 모든 것을 불러오는것이 아닌, 필요한 것을 필요 할 때 불러와서 성능을 개선 시킨다.

Import 구문

// 기존 import
import { name } from './names';

console.log(name(10,20))

// code splitting 도입
import('./names').then(v => {
 console.log( name(10,20));
});