Custom Document는 서버사이드렌더링 되는 페이지의 마크업을 추가하기 위해 사용한다. 이 Custom Document내부에는 getInitialProps가 있는데 여기서의 getInitialProps는 서버사이드렌더링 될때 필요한 데이터를 비동기로 가져오기 위해서 존재한다. next.js는 기본적으로 Document.js를 가지고 있지만 서버사이드렌더링 될때 어떤 특정 데이터를 페이지에 내려주고 싶다던지 마크업을 수정하고 싶다던지 하는 커스텀 요구사항이 있을때 pages폴더 아래에 _document.js파일을 만들어주면 된다. import Document, { Html, Head, Main, NextScript } from 'next/document' class MyDocument extends..
서론 이 글은 SSR 프레임워크인 Next.js를 커스텀해서 성능을 향상시킨 라이브러리를 구현한 내용을 담은 글을 요약, 번역한것입니다. 이해를 돕기 위해 많은 의역이 들어갈 수 있으니 참고해주세요. 웹에서의 성능 고성능을 유지하려면 클라이언트에게 적은 양의 코드를 보내야 한다. 우리는 우리가 hydrate해야 하는(static 하지 않고 유저와 상호작용 해야 하는 리액트 컴포넌트) 컴포넌트만 클라이언트에게 보내는 방식으로 성능을 끌어올렸다. 나머지 부분은 서버에서 렌더링한 그대로 놔둔다. The Cost Of JavaScript In 2018 위 내용에서 가장 중요한것은 다음과 같다. 자바스크립트의 비용은 로드할때 뿐만아니라, 파싱하고 실행하는것까지 포함된다. 우리가 최적화 하려고 하는것은 클라이언트에..
- Total
- Today
- Yesterday
- react
- return type
- design system
- Babel
- hydrate
- await
- reducer
- Polyfill
- storybook
- props
- server side rendering
- state
- Next.js
- javascript
- computed
- useRef
- Action
- rendering scope
- reflow
- webpack
- useEffect
- type alias
- es6
- async
- promise
- reactdom
- typescript
- react hooks
- atomic design
- mobx
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |