[Hello, world! 10월호]
Next.js 13! 그게 뭔데요?
![](https://blog.kakaocdn.net/dn/cKKRrs/btrVVJhg8R4/2JXUIHyckC9jgkOxu0H4Lk/img.png)
2022 SSAFYcial 기획기사
빠르게 지나가는 IT 세상, 코알못들을 위한 IT뉴스 알아보기!
![](https://blog.kakaocdn.net/dn/cuPemR/btrVXBwgKe5/a149H0ajHW09AtvMvuRvqk/img.png)
지난 10월 26일,
웹 개발 프레임워크인 Next.js가
버전 13의 계획을 발표했습니다!
![](https://blog.kakaocdn.net/dn/cutPWQ/btrVYknG2jy/KdKWR9vaNpGyxKYG0QkeZK/img.png)
Next.js는 리액트를 기반으로 하는
서버 사이드 렌더링 프레임워크입니다.
기본적으로 CSR(Client Side Rendering)을
위주로 하는 리액트에,
SSR(Server Side Rendering)이 가능하도록
도와주는 프레임워크죠.
![](https://blog.kakaocdn.net/dn/dIrEV0/btrVU89qV2c/JoYqeo4DJ3o5ILOeY5rJ6k/img.png)
그렇다면, CSR과 SSR은 무엇이 다를까요?
CSR은 클라이언트 사이드 렌더링, 즉
클라이언트인 브라우저가 주체가 되어
화면을 렌더링하는 방식이고,
SSR은 서버 사이드 렌더링, 즉
클라이언트의 요청에 따라 서버가
화면을 구성하여 제공하는 방식입니다.
초기 로딩 속도는 SSR이 CSR보다 빠르지만,
이후의 요청에 대해서는
CSR이 더 빠르게 반응합니다.
![](https://blog.kakaocdn.net/dn/cOMpML/btrVVfObW0u/QicJy9lpFCvqaFY8EBot8K/img.png)
Next.js는 화면 렌더링의 두 방식 중
SSR을 위한 프레임워크인데요,
SSR의 가장 큰 장점 중 하나는
검색 엔진에 노출이 잘 되도록 하여
검색 엔진 최적화,
Search Engine Optimization 측면에서
큰 이점을 가지고 있다는 점입니다.
![](https://blog.kakaocdn.net/dn/ba4yCx/btrVWenMXkZ/Vl3BMy70C4g4rgQIdeK7m0/img.png)
1. app/ directory
Next.js 13이 가져온 가장 큰 변화는
app/ 이라는 새로운 디렉토리의 등장이에요.
기존의 pages 디렉토리의 기능을 개선하여
라우팅과 레이아웃 기능이
향상되었다고 하네요!
![](https://blog.kakaocdn.net/dn/5yuY4/btrVU8VUmWy/xW4gDXgl0v3s27fKGQomDK/img.png)
2. Turbopack
Webpack, Vite보다 훨씬 빠르게
파일을 컴파일 할 수 있는
Turbopack도 지원한다고 해요.
당장 Next.js 13에서는 체감되지 않을 수 있지만
앞으로 더 많은 발전이 기대가 되네요!
![](https://blog.kakaocdn.net/dn/b6A75F/btrVUxn5L5l/msFbU5xMOURg6rPd0tn54K/img.png)
정보출처
Next.js 13이 나와버렸다
Next.js Conf에서 갑툭튀한 Next.js 13
velog.io
[Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?
본 게시글은 nextjs learn course와 공식문서를 기반으로 작성되었습니다. 들어가며 회사에서 Next.js를 사용해 프로덕션을 개발하고 있으면서도, 개념에 대해 두루뭉술하게만 알고있어서 누군가가 왜
velog.io
![](https://blog.kakaocdn.net/dn/YO3i5/btrVU8uSjUf/D0kfcNY4miT5zudYUwazr0/img.png)
'SSAFY > SSAFYcial' 카테고리의 다른 글
[SSAFYcial] SSAFY 1년의 기록: 안녕, SSAFY! (1) | 2023.01.16 |
---|---|
[Hello, world! 11월호] Jamstack! 그게 뭔데요? (0) | 2023.01.15 |
[SSAFYcial] 릴리즈 노트, 이렇게 작성해요! (0) | 2023.01.13 |
[Hello, world! 9월호] AI가 코딩을 해준다구요? 깃허브 코파일럿! (0) | 2023.01.12 |
[SSAFYcial] 개발 블로그 플랫폼 비교하기 (3) | 2023.01.11 |