Authentication

Authentication은 사용자가 누구인지 확인한다, 반면 autorization은 사용자가 접근할 수 있는 것들을 제어한다. Next.js는 서로 각걱 다른 사용방식으로 설계된 여러 authentication 패턴을 지원한다. 이 페이지는 각 경우들을 살펴볼 것이고 제약조건에 맞는 authentication을 선택할 수 있다.

Authentication Patterns

첫번째 단계는 어떤 authentication 패턴이 맞는지 확인하기 위해 너가 원하는 data-fetching strategy을 이해하는 것이다. 그런 후 어느 authentication provider가 이 전략에 지원가능한지 결정할 수 있다. 거기엔 두가지 메인 패턴이 있다.

• 서버에서 loading state를 하는 static generation을 사용하는 것이다. 그리고 그 후에 client-side를 통해 사용자 정보를 가져온다.
• 인증처리 안된 정보를 잠깐 보여주는 현상(client-side 사용시 발생할 수 있는 문제)이 잠깐 보여지는 현상을 막기위해 사용자 정보를 server-side에서 가지고 오는것이다.

Authentication Statically Genderated Pages

Next.js는 만약 동기적으로(blocking data requirements) 정보를 가져오는 요청들이 없다면 페이지를 정적페이지로 결정한다. 이 말은 만약 페이지에 getInitialProps 나 getServerSideProps가 없다는 말이다. 대신 너의 페이지는 서버로부터 로딩상태를 렌더 할 수 있다. 그 후에 client-side를 통해 사용자 정보를 가져온다.

이 패턴의 장점은 next/link를 사용해서 preload된다는 것과 global CDN이 제공된다는 것이다. 이 결과는 더 빠른 Time to Interative로 이어진다.

프로필페이지를 예로 들어보자. 초기에 로딩이 되고 그 후 사용자정보를 가져오는 요청이 완료되면 사용자이름이 보일것이다.

// pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // Fetch the user client-side
  const { user } = useUser({ redirectTo: '/login' })

  // Server-render loading state
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }

  // Once the user request finishes, show the user
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile