서버사이드 렌더링

웹팩 진짜.. 뭐가 이렇게 어려워 공식사이트 보고 하는 게 가장 최고다. 공식 document의 중요성을 깨닫게 한 토픽 문제의 설정 cra를 eject해서 웹팩 코드를 꺼낸 뒤 서버사이드렌더링을 위해 웹팩 설정을 해야 한다는 것까지는 이해 그런데 이 설정이 도대체

build/asset-manifest.json위 파일의 main.cssmain.jsruntime-main.jsstatic/js/2.7980f885.chunk.js를 html내부(index.server.js에서 생성하는 페이지)에 삽입하기 src/ index.server

서버에서는 자동 리렌더링이 불가능함( 컴포넌트 x. 문자열 형태 렌더링이기 때문에) useEffect나 componentDidMount에서 설정한 작업 등이 호출되지 않음 모듈 설치하기 콘솔: yarn add redux react-redux redux-thunk axi

서버사이드 렌더링 + 코드 스플리팅 기본 제공: 서버 유틸 함수, 웹팩 플러그인, babel 플러그인 설치: (콘솔) yarn add @loadable/component @loadable/server @loadable/webpack-plugin @loadable/bab

장점: 코드 스플리팅, 데이터 로딩, ssr을 가장 쉽게 적용할 수 있음 단점: React Router와 호환되지 않음 ( 리팩터링 힘듬 ) 파일 시스템에 기반하여 라우터를 설정실제 작동 원리 이해하기 힘듬( 마-법)