# loadable-components 와 Next.JS

## 공통점
- 코드 스플릿팅을 지원한다
- 현재 사용하지 않는 코드라면 따로 분리시켜, 나중에 필요할 때 불러와서 사용 할 수 있다. ( 페이지의 로딩 속도 개선 )
- 서버사이드 랜더링 지원

### loadable-components
#### 코드 스플리팅
- import 를 사용하여 코드 스플리팅

handleClick = () => {
    import('./notify').then(({ default: notify }) => {
      notify();
    });
  };

- loadable 메소드를 사용하여 코드 스플릿팅
- fallback option으로 로딩중 화면을 렌더링 할 수 있다.

const SplitMe = loadable(() => import("./notify"), {
  fallback: <div>로딩중입니다</div>,
});

- 동적 import

const AsyncPage = loadable(props => import(`./${props.page}`))

<AsyncPage page="Home" />

### preload
- 이벤트가 발생하기전에 미리 불러오는것
- ex) 클릭 하기 전 hover 시점부터 로딩을 시작하면 빠르게 로딩되는것 처럼 생각

     <button
        onClick={() => {
          setvisible(true);
        }}
        onMouseOver={() => {
          SplitMe.preload();
        }}
     >

### SSR

npm install @loadable/server && npm install --save-dev @loadable/babel-plugin @loadable/webpack-plugin

- babel 설정 파일에 "plugins": ["@loadable/babel-plugin"] 추가
- webpack 설정 파일에 plugins: [new LoadablePlugin()], 추가
- loadableReady를 통해 모든 스크립트를 동기적으로 로딩

next.js 없이 서버사이드 렌더링용 코드스플리팅을 구현하는 최선의 방법

### Next.JS
- 코드 스플리팅 자동화
- zeroconfig : 설정없이 사용가능
- 라우팅
- 파일기반 라우팅
- 동적 라우팅을 위해서는 배열로 파일 명을 해주면 동적 라우팅을 사용할 수 있다 ex)[userId]
- 데이터 프리패치
- getStaticProps : 빌드시 고정되는 값, 빌드 이후에는 변경 불가
- getServersideProps : 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옵니다.
- 커스텀 설정 : 필요하다면 babel, webapck 를 설정할 수 있다.

### Next.JS 선정이유
- 프로젝트 진행 시 초기 설정에 대한 부담이 적은 next.js 선정

### 참고자료
- [Next.JS 공식문서](https://nextjs.org/docs/basic-features/pages)
- [loadable Components 공식문서](https://loadable-components.com/docs/getting-started/)
- [loadable-components 벨로퍼트님](https://velog.io/@velopert/react-code-splitting)
- [Next JS 핸드북](https://coffeeandcakeandnewjeong.tistory.com/5#ch-2)

###### tags: `tech sharing`