pages, Pre-rendering

Pages

• Next.js에서 pages 디렉토리 아래 원하는 경로 명으로 디렉토리를 생성하고 index.js(jsx, ts, tsx) 파일을 생성하면 해당 경로로 진입할 때의 페이지를 구성할 수 있다.
• 아래 처럼 chicken 디렉토리를 만들고 index.tsx에 /chicken에 보여줄 컴포넌트를 작성할 수 있다.
• 또한 디렉토리 아래 [uri 파라미터 이름].js(jsx, ts, tsx)으로 파일을 성하면 dynamic routing을 할 수 있다 .
• 아래와 같이 디렉토리 구조를 잡는다면 /chicken 경로 뒤에 아무 이름이나 붙이면 [id].tsx가 렌더링된다
  • /chicken/123121312312, /chicken/gggg 는 모두 [id].tsx를 렌더링한다

Pre-rendering?

• Next.js는 모든 페이지를 pre-rendering한다!
  • Client Side의 Javascript가 모든 작업을 수행하는 대신에 미리 각 페이지에 대한 HTML을 생성한다.
  • pre-rendering을 통해 더 좋은 성능과 최적화된 SEO를 경험할 수 있다고 한다.
• 생성된 각각의 HTML은 페이지 구동에 필요한 최소한의 Javascript 코드와 연동된다. 페이지가 브라우저에 로드되면 페이지의 Javascript 코드가 실행되고 상호작용 한다!
  • 이 과정을 hydration 이라고 한다!
  • HTML을 미리 렌더링하고, 그 뒤에 요청이 오면 Chunk 단위로 javascript를 보내주어 이벤트가 작동!
• React로만 이루어진 어플리케이션과 다르게 Next.js로 이루어진 어플리케이션은 pre-rendering 과정이 존재한다.
  • Next.js는 static한 HTML을 pre-rendering 시키기 때문에 Chrome에서 Javascript를 disabled 시키고 확인하면 Javascript가 실행되지 않는 UI를 확인할 수 있다!

 

Pre-rendering: Static Generation & Sever-side Rendering

• Next.js에는 Static Generation과 Server-side Rendering 두 종류의 Pre-rendering이 존재한다.

Static Generation (SSG: Static Site Generation)

• HTML이 빌드 타임에 생성되고 매 요청마다 재사용되는 방식
• 빌드를 진행할 때 pages 폴더에서 작성한 각 페이지들에 대해 각각의 문서를 생성해서 static한 파일로 생성
• 만약 해당 페이지에 대한 요청이 발생하게 되면, 이 페이지들을 재생성하는 것이 아니라 이미 생성이 된 페이지를 반환하는 형태로 동작

Server-side Rendering (SSR)

• HTML이 매 요청마다 생성되는 방식

정적으로 생성된 정보를 요청마다 동일한 정보로 반환할 경우에는 Static Generation을 선택하고 최신의 서버 데이터로 화면을 그려야할 때는 Server-side Rendering을 사용하자.

 

Static Generation

• static generation에는 data를 가지고 페이지를 만드는 경우와 그렇지 않은 경우 두가지가 존재한다.

Data 없이 페이지를 생성할 때

• 기본적으로 Next.js는 데이터 패칭 없이 Static Generation 방식으로 페이지를 pre-rendering한다. 

export const App = () => {
  return (<div>hellow duckgugong</div>)
}

Data를 가지고 페이지를 생성할 때

• Data를 가지고 페이지를 생성할 때 두가지 경우가 존재한다! 
  • 페이지의 내용이 외부 데이터에 의존할 때
    • db
  • 페이지의 경로가 외부 데이터에 의존할 때
    • url

내용이 외부 데이터에 의존할 때 - getStaticProps

• 비동기 함수인 getStaticProps을 페이지 컴포넌트에서 export하면 Next.js는 이 함수에서 리턴한 값을 빌드할 때 컴포넌트에 props로 전달한다.
• 반드시 페이지에서만 사용해야 한다!

// /chicken/index.tsx

const Chicken = ({brand}: {brand: string}) => {
    return(
        <>
            <h1>Chicken Component</h1>
            <h3>brand is: {brand}</h3>
        </>)
}

export async function getStaticProps (){
    return {props: {brand: 'BBQ'}}
}

export default Chicken

경로 외부 데이터에 의존할 때 - getStaticPaths

• dynamic routing과 getStaticProps를 같이 사용할때 getStaticPaths를 사용한다.
  
  • getStaticPaths를 사용해 렌더링할 dynamic routing 경로를 설정할 수 있다.
  • 페이지가 빌드되어 pre-render될 때 어떤 경로의 페이지인지 정의
• dynamic routing을 하는 어떤 페이지에서 getStaticProps를 export하면 getStaticPath가 정의한 모든 path들을 SSG 방식으로 pre-render한다
• getStatic paths는 객체에 두가지 key를 담아서 리턴하는데 하나는 paths라는 경로가 담긴 key이고 하나는 fallback이라는 key인데 paths에 없는 경로를 어떻게 처리할 지에 대한 key이다.
  
  • fallback이 false라면 paths로 리턴되지 않은 경우에 대해 404페이지로 호출되지만 true라면 getStaticProps의 행동이 변하는데 빌드시에 생성되지 않은 경로들은 첫번째 요청 때 fallback버전을 제공한다
   
• 아래 예시를 통해 살펴보자!
• getStaticPaths에서 리턴한 paths 속 params:{id: 'some string'}가 getStaticProps에서 params prop으로 하나씩 매핑된ㄴ다.

import { GetStaticPaths } from 'next'
import { GetStaticProps } from 'next'

const ChickenID = ({id}: {id:string}) => {
    return(
        <>
            <h1>ChickenID Component</h1>
            <h3>id: {id}</h3>
        </>
    )
}

export const getStaticPaths: GetStaticPaths = async () =>{
    const paths  = [
     {params: {id: '1'}},
     {params: {id: '3'}},
     {params: {id: '5'}},
     {params: {id: '7'}}
    ]
    return {paths: paths, fallback: false}
}

interface paramsType{
    id: string
}

export const getStaticProps: GetStaticProps = async({params}) =>{
    return {props: {brand: 'BBQ', id: params && params.id}}
}
export default ChickenID

Server-side Rendering

• Request 요청이 올 때마다 Server-side Rendering 방식으로 pre-render를 하고 싶으면 getServerSideProps를 async 함수로 감싸서 export하는 방법이 있다.

import { GetServerSideProps} from 'next'

const Chicken = ({brand, params}: {brand: string, params:any}) => {
    console.log(params)
    return(
        <>
            <h1>Chicken Component</h1>
            <h3>brand is: {brand}</h3>
        </>)
}

export const getServerSideProps: GetServerSideProps= async() =>{
    return {props: {brand: 'BBQ'}}
}

export default Chicken

 

+++ redirect 

• getSuverSideProps의 리턴 값을 설정해주면 redirect 기능을 사용할 수 있다.
• 만약 /chicken 경로로 이동하면 아래 코드에선 /login 경로로 redirect된다!

import { GetServerSideProps} from 'next'

const Chicken = ({brand, params}: {brand: string, params:any}) => {
    return(
        <>
            <h1>Chicken Component</h1>
            <h3>brand is: {brand}</h3>
        </>)
}

export const getServerSideProps: GetServerSideProps= async() =>{
    return {
        redirect: {
            permanent: false,
            destination: "/login",
        },
        props:{}
    }
}

export default Chicken