NEST.JS 정복하기(1)

Next.js 를 하게 되었다.

해야할 일이 태산이다.

하나하나 차근차근 배워보고 익혀보자.

잘 알아두면

두고두고 쓸 기술이다!

---

1. getServerSideProps();

 

이 함수는 SSR - 서버사이드 렌더링을 지원하기 위한 함수이다.

사용하면 페이지를 요청할 때마다 서버에서 데이터를 가져와 페이지를 그릴 수 있게 된다.

 

기본적으로 이 함수는 비동기 함수 작성하며, 페이지를 렌더링하기 전에 서버에서 먼저 실행된다.

 

[1차 시도]

import axios from "axios";

function MyPage({ data }: any) { // props에서 data만 사용하도록 변경
  console.log(data);
  return (
    <div>
      <p>서버에서 가져온 데이터: {JSON.stringify(data)}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const fakeData = {
    name: "John Doe",
    age: 25,
    email: "johndoe@example.com",
  };

  return {
    props: {
      data: fakeData,
    },
  };
}

export default MyPage;

서버가 없어서 일단 fakeData를 사용했다.

 

이렇게 하니까 'undefined'가 계속 나왔다.

뭐가 문제 였을까? 고민을 했다.

 

알고 보니

내가 모르고 있던 가장 기본적인 지식이 있었다.

ㅎㅎㅎㅎㅎㅎㅎ.....

pages 에서만 작동한다는 거다..

 

그 이유는 페이지가 렌더링 되기 전에 미리 데이터를 받아서 컴포넌트에 전달해야 하기 때문에,

오직 페이지에서만 사용이 가능하다고 한다.

 

다시 정리하면 page에 해당하는 컴포넌트만 

함수를 사용할 수 있다 이말이다...

 

[무수한 n차 시도]

import { GetServerSideProps } from "next";
import React from "react";

const MyPage = (props: any) => {
  const { name, posts } = props;

  return (
    <div>
      <h1>Hello {name}!</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export const getServerSideProps: any = async () => {

  const url = "https://jsonplaceholder.typicode.com/posts";
  const posts: Post[] = await fetch(url)
  	.then((res) => res.json());
  return {
    props: {
      name: "Next",
      posts: posts,
    },
  };
};

export default MyPage;

 

---

나 하루종일 뭐했니..?

제발.. 공식문서를 더 꼼꼼하게 보자