[React🌀] Next JS 12 업데이트 사항 총 정리 📄

Next JS 12

React와 Next JS 는 끊임없이 변화중이죠..
괜히 프론트엔드의 메이저 프레임워크로 자리잡혀가는 게 아닌 것 같습니다.

• Next JS 12 문서
• React 18 은 여기 엄청 잘 정리가 되어 있음

 

Next JS 12 에는 어떤 변화가?

Next JS 공식 블로그 에도 깔끔하게 잘 정리가 되어 있습니다.

 

 

Rust Compiler

• rust 기반의 컴파일러로 바꿈
• refresh 속도가 3배
• 빌드 속도가 5배
• 사용해보니 실제로 체감되는 속도 👍

 

React 18 Support

• React 18 버전을 지원

 

Server-Side Streaming

• Suspense 및 SSR 스트리밍 지원
• HTTP 스트리밍을 통해 페이지를 서버 렌더링 가능

말 그대로 해석한 것이긴 한데, 아마 React 가 새롭게 연구개발중인 Suspense mode 를 도입할 수 있다는 뜻 같아 보입니다.
레퍼런스도 따로 없고, 아직 실험적인 기능이니, 아직 운영환경이 직접 적용해서 사용하기에는 조금 무리일 듯 합니다...

 

React Server Components

• 리액트 서버 컴퍼넌트 를 next js 에서 사용 가능
• 만약 잘 사용한다면 getServerSideProps or getStaticProps 없이 컴퍼넌트들로만 구성이 가능할 듯
• next.config.js 에 아래 옵션을 설정해주고 .server.js postfix를 이용해서 사용 가능
• server-side Suspense, selective hydration, and streaming rendering 에 집중중이라고 하니, 이것 또한 Suspense Mode를 도입할 때 함께 고려해보면 좋을 듯
• 관련 영상
• 관련 doc

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

 

ES Modules Support and URL Imports

 

ES Modules Support

• NextJS 부터는 ES module 형식이 default (Common JS X)

URL Imports

• 패키지를 node_modules 가 아닌 url 단위로 import 가 가능
• 만약 사용한다면 next.lock 캐쉬 파일이 생성되어서 offline에서도 사용 가능
• 관련 doc

설정

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}

사용 예시

import confetti from 'https://cdn.skypack.dev/canvas-confetti

 

Bot-Aware ISR Fallback

• ISR 처리를 통해 빌드 타임에 렌더링된 정적 페이지를 주기적으로 업데이트가 가능
• 관련 문서
• fallback: true 옵션으로 사용 가능
• 새롭게 렌더링이 되는 페이지를 로드하는 순간까지는 기존의 정적인 페이지를 보여줌 (검색 엔진에는 잘못된 정보가 갈 수 있다)

// pages/products/[id].js

export async function getStaticPaths() {
  const products = await getTop1000Products();
  const paths = products.map((product) => ({
    params: { id: product.id },
  }));

  return { paths, fallback: 'blocking' };
}

 

Smaller images using AVIF

• 최신 압축 포맷인 AVIF 를 사용 가능
• 20% 더 작은 용량
• 아래 옵션을 이용해서 사용 가능

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

 

MiddleWare

 

Next JS 미들웨어? https://programming119.tistory.com/254 에 조금 더 구체적으로 설명이 있습니다.

[React🌀] Next JS middleware / 미들웨어 / (Next JS 12.0.0)

 

• next JS 에서도 미들웨어 사용 가능
• A/B 테스팅, 리다이렉트, 브라우저 지원, 로깅 등등 다양하게 활용이 가능
  • 예제 코드들
• middleware 는 Edge Funciton에 의해 실행됨
• 관련 doc
• 관련 동영상

 

Edge Function이란?

• Vercel 의 Edge Network에 배포된 Edge Function들은 매우 빠르고 동적으로 개인화시킨 데이터를 전달
• 속도가 빠르지만 정적인 컨텐츠만을 제공할 수 있는 CDN, 동적으로 매 요청마다 랜더링이 가능하지만 속도가 느린 동적 서버 둘의 단점들을 극복
• About Edge Function
• Edge Function Doc

 

기타

• next lint --file 로 단일 파일 lint가 가능
• tsconfig.json 파일 경로를 커스텀 가능
• Fast Refresh 가 EventSource connection 대신 WebSocket connection 을 사용
• webpack 5를 사용, webpack 4는 이제 공식적으로 지원 X

 

적용 가능성

빌드속도나 리프레시 속도가 빨라진 점은 그냥 버전 업만 해도 바로 적용이 되는 것이니, 보편적으로 활용가능한 좋은 부분이죠.

미들웨어 또한 꽤나 유용하게 이용할 수 있을 것으로 보입니다.
Edge Function을 이용한다는 점에서 속도 면에서 이점을 가져가는 것이고,
이미 Next JS 에서 활용 예시들을 많이 보여주고 있어서 바로 활용이 가능할 것 같습니다.

하지만, Edge Function으로 실행되어서 Node API 를 그대로 사용할 수는 없다는 점과
아직은 베타버전이라 예상치 못한 이슈가 생길 수 있다는 점은 고려해야 할 점 입니다.

URL Imports 나 React Server Components 도 아직은 알파 버전이지만 앞으로 주시하면서 도입해도 좋을 것 같습니다.
번들 사이즈 측면에서나, 컴포넌트 import export 측면에서 이점을 가지는 건 확실해 보입니다. (잘 짜면 코드의 깔끔함도 향상될 것 같음!)
(허나 아직까지는 레퍼런스도 적고, 사용한 사례들도 보이지않아 불안한것은 사실...)