TIL 2021-11-06 Next.js12

Next.js 12 버젼의 새로운 변경점들을 알아보면, 인상깊은것은 3가지인거 같다.

 

 

Babel -> Rust

 

Babel 기반의 컴파일러에서 Rust 기반의 컴파일러로 변경

 

Custom Babel 설정이 있으면 자동으로 Rust기반의 컴파일러를 사용 안하고 Babel을 사용하게 되는데,

 

컴파일 시간등의 성능적인 면에서 손해를 보게 될듯

 

커스텀 바벨 설정을 사용하는 Styled Component나 Emotion, Relay등을 위한 포팅을 준비한다고 한다.

 

 

 

미들웨어

 

말 그대로 미들웨어를 설정할수 있게 된다.

 

지금까지 SSR 중 Redirect, JWT Auth등의 공통된 행동이 필요할떄면,

 

원래는 함수를 만들어 getServerSideProps에 넣거나, 이런 함수가 들어간 getServerSideProps의 HoC를 만들어야했는데, 이제는 미들웨어로 처리 가능하다.

 

 

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get('authorization')

  if (basicAuth) {
    const auth = basicAuth.split(' ')[1]
    const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')

    if (user === '4dmin' && pwd === 'testpwd123') {
      return NextResponse.next()
    }
  }

  return new Response('Auth required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  })
}

제일 직관적이라고 생각하는 로그인 유무 코드

 

https://github.com/vercel/examples/tree/main/edge-functions/basic-auth-password

GitHub - vercel/examples: Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust an

 

 

 

 

 

SSR?

 

React18의 Suspense 등의 SSR Streaming을 지원한다고 하고,

 

제일 중요해보이는 것이 바로 React Server Component다.

 

아직 알파버젼이긴 한데, 안정화되면 Next.js 12 이전과 코드 기조가 굉장히 바뀔거 같다는 생각이 든다.

 

import React, { Suspense } from 'react'

import Profile from '../components/profile.server'
import Content from '../components/content.client'

export default function Home() {
  return (
    <div>
      <h1>Welcome to React Server Components</h1>
      <Suspense fallback={'Loading...'}>
        <Profile />
      </Suspense>
      <Content />
    </div>
  )
}

구조는 이렇다.

 

.server .client로 서버에서 렌더링할 컴포넌트, 클라이언트에서 hydrate할 컴포넌트를 나누어주면 끝이다.

 

기존의 getServersideProps 등에서는 SSR에서 Data Fetching을 하는 경우에 Fetching API가 느리게 작동한다던가 하는 경우에 빈화면으로 있는 시간이 길어 사용자 경험을 해쳤다.

 

하지만 서버 컴포넌트에서는 컴포넌트 단위로 Data Fetching을 하기 떄문에 점진적으로 로딩이 된다.

 

 

-장점

getStaticProps 등의 특수함수의 제거

SSR의 속도가 느릴떄의 UI 불편함 해소

 

 

https://www.youtube.com/watch?v=WlP2TB2ORL4