Next.js 13, 뭐가 달라?

React 18에서는 여러 업데이트가 이루어졌습니다.
Concurrency 개념도 포함이 되었고... 서버측 렌더링 기능에 대한 내용도 있고요.

이러한 리액트 18 업데이트와 연관된 Next.js 13의 변경사항들도 눈에 띄는데, 리액트 18과 Next.js 13은 어떤 연관성이 있는지, 어떤 방향성을 가지고 무엇이 바뀌었는지 이해해보고 싶었습니다.

Next.js, 뭐가 그렇게 좋은데?

그거 SSR 원툴 프레임워크 아냐?

예전엔 그런 느낌이 있었던 것 같기도…

처음 Next.js를 공부해서 사용할 때만 해도, 몇년 전까지만 해도 Next.js는 주로 리액트만으로 만든 애플리케이션의 한계인 SEO 최적화와 초기 페이지 로드속도 향상을 위한 SSR을 위해 사용하는 것이 가장 두드러지는 특징이었던 것 같습니다.

물론 그 때는 더더욱 개발 공부를 시작한지 얼마 안된 시점이었기 때문에 아는게 얼마 없었기 때문이 클 것 같긴합니다만...

하지만 지금은 아냐.. 무언가, 훨씬 강력해졌다 !

그럼에도 불구하고 불과 몇년 사이에 Next.js가 빠르게 강력해졌다는 의견이 많아졌고, 이제는 다양한 측면에서 개발편의성을 향상시키는 프레임워크로 자리매김했다고 생각합니다.

Next.js와 React의 관계

https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs

Next.js는 공식문서에서 이렇게 이야기합니다.

• User Interface - how users will consume and interact with your application.
• Routing - how users navigate between different parts of your application.
• Data Fetching - where your data lives and how to get it.
• Rendering - when and where you render static or dynamic content.
• Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.
• Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).
• Performance - how to optimize your application for end-users.
• Scalability - how your application adapts as your team, data, and traffic grow.
• Developer Experience - your team’s experience building and maintaining your application.

여러 측면에서 기능을 지원하고 있고, 리액트는 이 중 UI를 담당하는 라이브러리로 소개되어 있습니다. 이 내용에 따르면... Next.js는 리액트를 기반으로 하되 다른 여러가지 기능을 포함한, 개발 편의성을 향상시킨 프레임워크로 볼 수 있을 것 같아요.

조금 더 자세히 들여다보자면, Next.js 공식문서 상에서 배포전 확인해야할 사항들을 명시해둔 내용이 있습니다.

• Use caching wherever possible.

• Aim to ship the least amount of JavaScript possible.

• Defer loading heavy JavaScript bundles until needed.

• Ensure logging is set up.

• Ensure error handling is set up.

• Configure the 404 (Not Found) and 500 (Error) pages.

• Ensure you are measuring performance.

• Run Lighthouse to check for performance, best practices, accessibility, and SEO. For best results, use a production build of Next.js and use incognito in your browser so results aren't affected by extensions.

• Review Supported Browsers and Features.

• Improve performance using:

  • [next/image and Automatic Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)
  • Automatic Font Optimization
  • Script Optimization

• Improve loading performance

크로스 브라우징 부터 성능 최적화, 캐싱, 에러 핸들링 등등 여러 부분을 Next.js가 지원하고 있고, Next.js를 사용하지 않고 리액트로만 프로젝트를 작업한다면 개발자가 이를 일일히 신경써서 구현해두어야 한다는 것이죠.

(이 중 성능 최적화에 대해서는 추후에 별도의 포스팅으로 정리해보려 합니다 😃)

Next.js가 하고싶은 게 뭘까?

최근 13버전이 나왔고, 지금도 많은 사항들이 활발히 논의되고 업데이트되고 있는 Next.js. 궁극적으로 어떤 프레임워크로 자리매김해 무엇을 하고 싶은 걸까요? 어떤 방향을 바라보고 발전하고 있는 걸까요?

프론트엔드, 서버 영역으로의 확장

전반적인 프론트엔드의 흐름은 이전에 백엔드, 즉 서버로부터 분리되어 영역을 넓혀가다가 최근에 와서 다시 서버로 영역이 확장되어가는 추세라고들 이야기하는 것 같습니다.
(이런 내용을 한 아티클에서 읽었었는데... 출처를 찾아 가져오겠습니다.)

이와 관련해 Next.js가 프론트엔드 개발에서 해내고 있는 역할이 분명히 있는 것 같아요. 물론 이미 서버사이드 렌더링을 지원함으로써 많은 인기를 얻었지만, 리액트를 한층 더 강력하고 편리하게 사용할 수 있는 프레임워크로 진화하기 위한 움직임이 보입니다.

다시 말해 애플리케이션을 더 가볍고 빠르게 렌더링하기 위해 서버로 그 영역을 확장해 나가며 성능 개선의 여지를 찾아나가고 있는 중이라 보면 될 것 같습니다.

Next.js가 말하는 방향성

Next.js의 layouts에 대한 RFC에서 보다 구체적인 내용을 확인해볼 수 있습니다.
https://nextjs.org/blog/layouts-rfc

RFC?
RFC(Request for Comments) 문서는 "의견을 요청하는 문서"라는 의미로, 국제 인터넷 표준화 기구(IETF; Internet Engineering Task Force)에서 관리하는 기술 표준입니다.

이 문서를 가져온 이유는, 다른 버전 업데이트에 대한 내용보다 포괄적으로 Next.js가 계획중인 큰 방향을 알 수 있는 문서가 RFC일 것이라 생각하기 때문이고, 이 글이 Next.js의 블로그에서 확인할 수 있는 가장 최신의 RFC이기 때문입니다.

아래 인용된 내용에서 확인할 수 있듯 해당 문서에서는 최신 React18을 기반으로 어떻게 Next.js를 업데이트 할 것인지 전반적인 방향에 대해 이야기합니다.

그 중에서도 주요한 내용만 가져와 열거해보겠습니다.

---

This RFC (Request for Comment) outlines the biggest update to Next.js since it was introduced in 2016:
(이 RFC는 2016년에 소개된 이후 Next.js의 가장 주요한 업데이트를 개괄하고 있습니다.)

• Designed for Server Components: Optimized for subtree navigation. (서버 컴포넌트를 위해 디자인됨)
• Improved Data Fetching: Fetch in layouts while avoiding waterfalls. (향상된 data fetching: 워터폴 현상을 피하도록 layout에서 fetch)
• Using React 18 Features: Streaming, Transitions, and Suspense. (React 18 기능 사용: Streaming, Transitions, Suspense)
• Client and Server Routing: Server-centric routing with SPA-like behavior.
  (서버 중심의 라우팅이 SPA처럼 동작하도록 함)

The new Next.js router will be built on top of the recently released React 18 features. We plan to introduce defaults and conventions that allow you to easily adopt these new features and take advantage of the benefits they unlock.

(새로운 Next.js의 라우터는 리액트 18을 기반으로 만들어질 것입니다. 우리는 새로운 기능을 쉽게 적용하고 이를 통한 이점을 가져갈 수 있도록 기본사항과 컨벤션을 소개하는 것을 계획하고 있습니다.)

---

서버컴포넌트, 서버 중심의 라우팅, React 18의 feature, Streaming, Suspense등의 주요 키워드들이 보입니다. 이것들이 Next.js 13버전 업데이트의 굵직한 맥락을 짚기에 중요한 열쇠가 될 것 같네요!

다음 포스팅에서 정리하겠지만, 제가 이해한 바로는

• React 18이 React Server Component (RSC)를 도입
• SSR로 prerendering하는 HTML의 요소가 많아질 경우 렌더링이 오래걸리는 문제: 동기 렌더링방식이 원인으로, 비동기 렌더링을 위한 streaming SSR 사용
• Next.js 13은 이런 리액트의 변화를 흡수해 기존 SSR과 달리 페이지 단위가 아닌 컴포넌트 단위의 세부적인 개별 렌더링 방식을 적용할 수 있게 되었음

이렇게 정리해볼 수 있겠습니다. 위 내용에 대해 앞으로 하나씩 짚어보겠습니다.

SSR로 알아봅시다

React를 사용하던 프론트엔드 개발자들 사이에서 Next.js가 각광받기 시작한 가장 큰 이유는 SEO 최적화와 초기 로드 속도 개선 등의 장점을 취하기 위한 SSR이었습니다.

그렇다면

• Next.js에서는 SSR을 어떻게 구현했을까요?
• 이번에 업데이트된 13버전에서의 SSR은 12버전과 어떤 점이 달라졌을까요?

이어지는 포스팅에서 다루어보겠습니다 :)