Next.js 킬포 Pre-rendering 2. Server-side Rendering 그리고 Client-side Rendering

Pre-rendering중 하나인 Static-Generation은 저번시간에 실습해봤고, 이번엔 Server-side Rendering이야

Next.js 킬포 Pre-rendering 1. Static-Generation

지금 하고있는 튜토리얼에는 적용하지 않지만, 원하는 친구들도 있을것 같아 정리해봤어!

Server-side Rendering

이전 Static-Generation이 "빌드타임"에 HTML을 미리 생성했다면, 이번에는 "요청시마다" 서버에서 생성하는 Server-side Rendering이야. 

Photo by  Christina @ wocintechchat.com  on  Unsplash

방법은 유사한데, 이전 방법이 "getStaticProps" 메서드를 구현하는 거였다면, SSR(Server-side Rendering)은 "getServerSideProps"을 페이지 컴포넌트에 추가하면되!

메서드 샘플 한번 볼까?

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

 

getStaticProps메서드랑 차이가 있는데, 혹시 눈치 챘어? ㅎ

메서드 파라미터로 "context"가 들어오고 있어!

getServerSideProps 메서드는 페이지 "호출시" 마다 요청되기때문에, context에는 request파라미터가 들어 있다는 사실!, 파라미터에 따라서 다른 페이지를 보여주고 싶다면, 요 context에서 꺼내오면돼! 보통 url 파라미터를 많이 쓰니까 이경우 query 값을 꺼내면 될 것 같네. 

아래는 context안에 들어있는 값들이야.

• params : 페이지가 다이나믹 라우트를 사용할때, 라우트 파라미터들이 들어와 요건 나중에 라우팅 할때 자세히 설명할께
• req : HTTP Request 객체
• res: HTTP Response객체
• query : URL의 ?뒤의 쿼리 스트링
• preview : 페이지가 프리뷰 모드인지 아닌지. 요것도 나중에 설명
• previewData : setPreviewData 메서드에 의해 셋팅되는 값인데 이것도 다음기회에.

 

 

Client-Side Rendering

아마 페이지는 먼저 내려주고, 클라이언트가 API 호출하기만 원하는 친구들도 있을꺼야!

Photo by  Nick Iliasov  on  Unsplash

특히 개인정보가 들어가는 페이지 같은 경우는 보안을 위해서 데이터만 내려주고 싶을 수 있지.

리액트랑 완전히 동일하진 않지만 Static Generation (정적 생성) 방법이랑 Client-side에서 데이터만 호출하는 방식으로 Client-Side Rendering을 구현할 수도 있어

요걸 위해서 Next.js는 SWR이라는 리액트 훅을 만들어놨어

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/users/', fetch) // Client-side 렌더링시 API만 호출

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

동작 과정은 아래와 같아.

1. "next build" 명령어로 정적인 페이지를 생성한다.
2. 요청이 오면 생성한 HTML을 내려줌
3. Client(브라우저)에서 페이지를 그림 (Client-side Rendering)
4. 페이지 로딩이 완료되면 API 호출(SWR에 정의된 api)
5. 데이터가 포함된 부분 렌더링

오키도키?

리액트는 아예 빈페이지에 코드를 받아서 처음부터 렌더링하는데, Next.js는 기본이 Pre-rendering이라서 위와 같이 조금 달라. 요게 좀 강력한 부분이지!

오늘은 여기까~~~~지!

혹시 궁금하거나 부족한 내용이 있다면 댓글 고고싱!

다음엔 URL로 유연하게 페이지를 생성할 수 있는 Dynamic Routes를 시작할께!

블로그 글 제목은 나왔는데, 본문은 어떻게 생성할지 살짝 생각해봐! 

https://ppsu.tistory.com/66

Next.js - 페이지 자동 생성하기 - Dynamic Routes (동적 경로)