[Next] useEffect로 받은 데이터는 SSR될까? ( getInitialProps 사용 )

React useEffect를 사용했을 경우에 SSR이 될까?

☀️ 답 : useEffect안에서 동작하는 데이터는 SSR되지 않는다.

useEffect(() => {}, []) 는 마운트 되었을 때, useEffect는 실행된다. 그렇기 때문에 SSR로 받은 html을 받은 후 동작하기 때문이다.

데이터를 요청한 후 요청한 데이터를 받은 상태의 html이 Server-Side-Rendering이 되기 위해서 사용하는 방법은 getInitialProps !

해당 데이터가 SSR 되어야 하는 데이터인지, 그럴 필요가 없는 데이터인지 판단하여 로직을 구현해야한다. SSR 되지 않아도 되는 데이터라면 그대로 useEffect를 사용해도 되지만 SSR에 포함되어야 하는 데이터라면 아래와 같이 getInitialProps를 사용해보자.

1. 간단하게 uuid를 설치하여 값을 불러오는 api를 제작해보자.

------------------------------------------------------------------/pages/api/uuid.tsx
import { v4 as uuid} from 'uuid';

export default (req, res) => {
  res.statusCode = 200;
  res.json({ uuid: uuid() });
}

2. useEffect로 불러온 데이터가 SSR에 포함되는지 확인해보자.

-------------------------------------------------------------------/pages/get-uuid.tsx
import React, {useState, useEffect} from 'react';
import styled from 'styled-components'
import axios from 'axios';
import Link from 'next/link';

const Center = styled.div`
  display:flex;
  justify-content: center;
`;

function GetUuid(props) {
  console.log("render")
  const [uuid, setUuid] = useState('');

  const  getData = async () => { 
    const result = await axios.get('/api/uuid/')
    setUuid(result.data.uuid)
}

  // "화면" 에 마운트가 된 이후 동작한다.
  // 중요한점은 useEffect를 사용하면 화면이 렌더가 된 후 데이터를 불러오기 때문에
  // SSR에서는 해당 데이터를 받을 수가 없다.

  // 그렇기때문에 서버사이드 렌더링에 반영이 되어야 하는 내용인지,
  // 안되어도 되는 내용인지 판단하고 구현해야한다.
  useEffect(() => {
    getData()
  },[])

  console.log(props)

  return (
    <>
      <Center>
        <h1>{props.label} :   </h1>
        <h1>{props.uuid}</h1>
      </Center>
      <Center>
        <Link href="/">
          <a>
            돌아가기
          </a>
        </Link>
      </Center>
    </>
  )
}

export default GetUuid;

3. 불러온 데이터가 포함된 SSR을 하려면? getInitialProps를 사용해보자

-------------------------------------------------------------------/pages/get-uuid.tsx
import React, {useState, useEffect} from 'react';
import styled from 'styled-components'
import axios from 'axios';
import Link from 'next/link';

const Center = styled.div`
  display:flex;
  justify-content: center;
`;

function GetUuid(props) {
  console.log("render")
  const [uuid, setUuid] = useState('');

  console.log(props)

  return (
    <>
      <Center>
        <h1>{props.label} :   </h1>
        <h1>{props.uuid}</h1>
      </Center>
      <Center>
        <Link href="/">
          <a>
            돌아가기
          </a>
        </Link>
      </Center>
    </>
  )
}

// getInitialProps

// SSR을 할 때, 데이터를 미리 받아서 끼운 상태로 마운트 되게 하려면
// getInitialProps를 이용하여 props로 받아 데이터받은 후 SSR시킬 수 있다.

// 즉 getInitialProps에서 동작한 함수는 서버와 클라이언트에서 둘 다 동작한다.
// 또한 pages 아래에서만 getInitialProps 동작 가능하다.
// 즉 페이지스에서 데이터를 받아서 props로 컴포넌츠 폴더로 넘겨주는 식이 되어야한다.
GetUuid.getInitialProps = async function() {
  console.log("getInitialProps")
  const result = await axios.get('http://localhost:3000' + '/api/uuid/')
  return {
    label: "UUID",
    uuid: result.data.uuid
  }
}

export default GetUuid;