Next js SSR : get server side props

지금까지 공부했던 화면들은 next js의 장점인 SSR( Server Side Rendering ) 보단

CSR( Client Side Rendering ) 으로 화면 렌더링을 해주었습니다.

 

따라서 해당 화면을 브라우저에서 inspect 하게 되면 다음과 같이 데이터가 없는상태로 Loading 컴포넌트가 붙여진 채로 서버쪽으로 부터 html 소스파일을 받아오게됩니다.

 

지금까지의 플로우

즉 html 을 받아오고 > 화면 렌더링을 하고 > data fetch를 시작하고 pending 상태에서는 loading 화면을 보여주고 > fetch가 완료되면 그때서야 받아온 데이터를 가지고 렌더링하게 됩니다.

 

지금까지의 화면 이미지는 다음과 같습니다.

 

 

Server Side Rendering

next js에서는 서버측으로 부터

데이터를 불러오고 html 파일이 만들어진 상태에서

받아올 수 있는 방법을 제시해줍니다.

 

따라서 로딩화면이 필요가 없게 되는것이죠

 

get server side props

다음과 같이 index.js 파일 맨 하단에 aysnc 로 getServerSideProps() 함수를 선언해줍니다.

* 함수 이름은 고정적으로 작성해줘야합니다.

이 함수 내부에서 실행되는 코드는 client가 아닌 server 쪽에서 실행이 되는 함수입니다.

 

또 다른 사용법으로 서버쪽에서만 실행되고 보이는 코드니 API Key를 rewrite에서도 숨길 수 있지만 이 내부에서도 숨길 수 있다고 합니다.

// index.js

import { useEffect, useState } from "react";
import Seo from "../components/Seo";
export default function Home() {
  .... 함축 code
}

export async function getServerSideProps() {
  
}

 

 

그 다음 이제 Home 컴포넌트 내부의 필요없는 코드를 제거해 줄겁니다.

빨간색으로 표시가 된 코드들을 제거해줍니다.

로딩도 지우는 이유는 서버쪽에서 데이터가 포함된 html 파일을 만들어서

보내줄것이기 때문에 로딩이 필요없기 때문입니다.

그리고 fetching 했던 코드를 getServerSideProps 함수에 작성하고

return으로 키가 props인 값을 반환해줍니다. 

여기서 props 키 는 next js 가 인식하는 코드로 고정이고,

그 내부의 값은 원하는 데이터를 넣을 수 있습니다.

// getServerSideProps 내부에 작성
export async function getServerSideProps() {
  const { results } = await (await fetch(`/api/movies/popular`)).json();
  return {
    props: {
      results,
    },
  };
}

 

그리고 받아온 데이터는 해당 페이지 컴포넌트의 props 값으로 넘겨받게됩니다.

따라서 기존의 movies state로 데이터를 넘겨받았으니

컴포넌트로 받은 results를 movies 키값으로 치환해주고 사용합니다.

 

저장하고 확인하면 성공이 아닌 다음과 같은 에러를 만나게됩니다.

 

당연한 얘기인데 다음의 주소는 front 에서만 작동하는 주소이기 때문입니다.

더 나아가 frontend에는 브라우저에 이미 URL이 있어 해당 URL에 /api/movies/popular을 붙여 요청하기 때문이죠.

서버쪽에서는 작동하지 않습니다.

 

따라서 앞에 baseUrl 을 추가해줘야합니다.

지금은 개발단계 및 공부목적이므로 http://localhost:3000 을 추가해줘서 해결합니다.

export async function getServerSideProps() {
  const { results } = await (
    await fetch(`http://localhost:3000/api/movies/popular`)
  ).json();
  return {
    props: {
      results,
    },
  };
}

 

이제 받아온 html 소스코드를 inspect 해서 확인해봅니다.

받아온 소스가 훨씬 길어졌습니다.

실제로도 이미 데이터를 가지고 html 파일이 만들어진 상태로 넘어왔습니다.

그리고 아래쪽을 살펴보면

__NEXT_DATA__ 인 id로 props를 키값으로 하고 pagePropos > results인 데이터들이 들어가 있습니다.

 

Hydrate

next js 가 props로 해당 데이터들을 서버쪽에서 넘겨주고

react js 에서 hydrate 과정 ( html코드와 react js 의 코드를 매칭 시키는 과정) 을 통해

받아온 데이터를 처리하게 됩니다.

 

위와 같이 Next js 를 통해서 개발자는 SSR로써 로딩없이 페이지를 보여줄지,

CSR을 통해 로딩화면 후 데이터가 불러와지면 해당 컴포넌트를 보여줄지를 선택할 수 있습니다.

 

대신 위와 같은 SSR only 방법으로 렌더링을 하게되면 데이터가 완전히 불러오기 전까지는

navBar , footer 등등 데이터가 필요없는 부분도 보이지않고 기다리게됩니다.