https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
JavaScript 심화
4. Server Side Rendering (SSR)
SSR은 서버측에서 렌더링 하는 방식을 말하며 사용자가 웹 어플리케이션에 접근 시 서버에 페이지에 대한 요청을 하고 서버에서는 HTML, JS 와 같은 리소스들을 렌더링하여 반환한다.
장점
- SEO(검색엔진 최적화)에 유리하다.
- 요청한 페이지의 html을 다운로드 하기 때문에 CSR에 배해 초기 로딩이 빠르다.
- 각각 페이지에 대한 정보를 입력하기 쉽다.
단점
- 매번 새로운 html을 받아오기 때문에 사용자 경험이 좋지 않다. (화면 깜빡임)
- Header, Footer 같은 중복된 내용도 매번 렌더링 하여 다운로드 하기 때문에 초기 로딩은 빠르지만 전체적인 페이지 이동은 CSR에 비해 느리다.
- 완성된 HTML이 JS에 비해 먼저 받아오기 때문에 화면은 노출되지만 이벤트 동작은 안될 수 있다.
.
🔎 Next.js
Next.js는 vercel에 의해 개발된 React 기반의 프레임워크. 복잡한 설정 파일 없이 확장이 가능하며 성능 좋은 React 코드를 개발할 수 있게 도움을 준다.
Pre-rendering
Next.js는 클라이언트 측 페이지와 별개로 각 페이지의 HTML 코드들을 미리 생성한다. 이 과정을 pre-rendering이라 하고 이렇게 생성된 HTML과 페이지 동작을 위한 최소한의 JS 코드를 생성하여 연결한다.
데이터 불러오기
Next.js는 아래 함수들을 사용하여 SSR, SSG 양쪽에서 모두 데이터를 불러올 수 있다.
- getStaticProps - 데이터 렌더를 위해 SSG 생성과 함께 사용한다.
- getStaticPahts - 동적 라우팅 처리를 위해 SSG 생성과 함께 사용한다.
- getServerSideProps - SSR에서 사용한다.
이미지 자동 최적화
Next.js는 이미지 자동 최적화 기능이 구현되어 사이즈를 변경하거나 퀄리티를 수정하는 등 브라우저들이 지원하는 최신 포멧의 이미지를 제공할 수 있다.
Import Image from 'next/image'
<Image src="..." width={500} height={500} />
라우팅
Next.js는 pages 디렉토리를 통한 라우팅을 지원한다. 서브 디렉토리를 포함하여 해당 폴더 내의 모든 js파일들을 경로에 대응하는 라우팅 경로로 사용된다. 또한, 동적으로 라우팅 경로를 만드는 것도 지원한다.
코드 스플리팅
코드 스플리팅 기능을 적용하면 클라이언트 측 성능 확보를 위해 꼭 필요한 JS만 보낼 수 있다.
- 라우팅 경로 기반 : 사용자가 라우팅할 때 최초로 필요로 하는 코드들만 전송. 나머지 코드들은 앱 내에서 페이지 이동을 할 경우 추가로 전송.
- 컴포넌트별 : 큰 컴포넌트를 여러 코드들로 나누어 필요할 때 다운로드 받을 수 있도록 한다. Next.js는 dynamic import를 통해 컴포넌트 코드 스플리팅을 지원한다.
TypeScript 내장
Next.js는 TypeScript가 기본으로 내장되어 있어 TypeScript와 함께 사용할 때 편리함과 안정성을 얻을 수 있다.
.
참조
https://patterns-dev-kr.github.io/rendering-patterns/overview-of-nextjs/
