web-Editor
React-Quill
next.js
등장 배경
React의 Virtual DOM을 기반으로 Client Side Rendering(CSR)를 하는데 이 경우 html javascript css를 모두 받아 render tree로 만들어야 하기 때문에 첫 로딩이 오래걸린다는 단점과, 빈 html을 가져와서 script를 로딩하기 때문에 Search Engine Optimization(SEO)에서 포털 검색에 거의 노출될 일이 없었습니다. 이러한 문제점을 해결하기 위해서 Next.js는 Pre-rendering을 통해서 페이지를 미리 렌더링 하여 HTML을 생성하여 성능을 향상시키고, SEO에서 장점을 얻을 수 있었습니다.
주요 기능
-
Server-side (Pre)Rendering
React에서도 써드파티 라이브러리나 내장기능을 사용해서 SSR을 구현할 수 있지만, Next.js를 사용하게 되면 별다른 설정없이 SSR을 구현할 수 있다. 또한 SSR뿐만아니라 CSR또한 같이 혼합하여 사용해서 두 장점을 같이 얻을 수 있다.
-
File Based Routing
React에서는 라우터가 없어서 보통 react-router-dom을 사용해서 렌더링한다. 하지만 Nest.js의 경우 별 다른 설정없이 Routing을 할 수 있고, 또한 폴더 내부의 파일위치나 파일명에 따라서 routing을 할 수 있다.
Image Optimization
기존<img>태그를 대체하는 next/image 패키지에 있는 Image 컴포넌트를 제공합니다.브라우저가 지원하는 경우에 Viewport에 맞게 다양한 이미지 크기를 로드 해둘 수 있어 성능을 있다.
next.js pre-rendering의 문제점
- next.js에서 pre-render 할때, diffing 하는 과정
-> 모든 css를 비굫하는 것이 아니라 HTML 태그를 중심으로 비교(구조가 맞는지)
-> hydration(최종적으로 그리는 것)에서 css 적용이 안되는 문제가 발생
