[Hello, world! 10월호] Next.js! 그게 뭔데요?

[Hello, world! 10월호]

Next.js 13! 그게 뭔데요?

 

2022 SSAFYcial 기획기사

빠르게 지나가는 IT 세상, 코알못들을 위한 IT뉴스 알아보기!

지난 10월 26일,

웹 개발 프레임워크인 Next.js가

버전 13의 계획을 발표했습니다!

 

Next.js는 리액트를 기반으로 하는

서버 사이드 렌더링 프레임워크입니다.

기본적으로 CSR(Client Side Rendering)을

위주로 하는 리액트에,

SSR(Server Side Rendering)이 가능하도록

도와주는 프레임워크죠.

그렇다면, CSR과 SSR은 무엇이 다를까요?

CSR은 클라이언트 사이드 렌더링, 즉

클라이언트인 브라우저가 주체가 되어

화면을 렌더링하는 방식이고,

SSR은 서버 사이드 렌더링, 즉

클라이언트의 요청에 따라 서버가

화면을 구성하여 제공하는 방식입니다.

초기 로딩 속도는 SSR이 CSR보다 빠르지만,

이후의 요청에 대해서는

CSR이 더 빠르게 반응합니다.

Next.js는 화면 렌더링의 두 방식 중

SSR을 위한 프레임워크인데요,

SSR의 가장 큰 장점 중 하나는

검색 엔진에 노출이 잘 되도록 하여

검색 엔진 최적화,

Search Engine Optimization 측면에서

큰 이점을 가지고 있다는 점입니다.

1. app/ directory

Next.js 13이 가져온 가장 큰 변화는

app/ 이라는 새로운 디렉토리의 등장이에요.

기존의 pages 디렉토리의 기능을 개선하여

라우팅과 레이아웃 기능이

향상되었다고 하네요!

2. Turbopack

Webpack, Vite보다 훨씬 빠르게

파일을 컴파일 할 수 있는

Turbopack도 지원한다고 해요.

당장 Next.js 13에서는 체감되지 않을 수 있지만

앞으로 더 많은 발전이 기대가 되네요!