코딩/SSR

Next.js란? SSR을 쉽게 만들어주는 리액트 프레임워크.

카슈밀 2021. 2. 14. 15:25
반응형

리액트 라우터와 호환되지 않는 단점을 가지고 있으나, 코드스플리팅, 데이터로딩, 서버사이드 렌더링을 가장 쉽게 적용할 수가 있어 매우 각광받는 방식이다.

 

리액트 라우터를 쓰려고 하는 경우 직접 코드스플리팅, 데이터 로딩, 서버사이드 렌더링을 직접 구현해야한다.

nextjs.org/

 

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

nextjs.org

 

Razzle 

Next.js처럼 서버 사이드 렌더링을 쉽게 할 수 있도록 해 주는 도구이며,

프로젝트 구성이 CRA와 매우 유사하다는 장점이 있다.

코드스플리팅시에 깜박임 플리커 현상 해결이 어렵다는 단점이 있다는데, 해결이 되었으려나?

최신 Loadable components이 기본설정으로 작동되지 않아 적용이 어렵다고 한다.

마치 node 15버전에서 styledcomponent가 작동되지 않아 4.14버전을 깔아서 쓰는 것처럼.

github.com/jaredpalmer/razzle

 

jaredpalmer/razzle

✨ Create server-rendered universal JavaScript applications with no configuration - jaredpalmer/razzle

github.com

 

그냥 여러모로 적용하기도 어렵지만 필요하다면 반드시해야하는 부분이라고 생각한다.

 

코드스플리팅, SSR이 초보자와 중급자를 구분하는 능력이 아닐까? 생각도 들고

일단 Redux 미들웨어부터 조지러 가야겠다.
Redux는 개념을 이해하고 어떻게 쓰는지도 알겠는데, 미들웨어는 감도 안잡힌다.

다시 복습하면서 만들어봐야겠다.

728x90