💣 Next.js_03 Server-side Rendering/SSR

Bori·2022년 1월 4일

next.js

Next.js

목록 보기

3/12

Next.js

코딩앙마 Next.js 강의를 보고 정리한 내용입니다.

🔪 로딩 화면 구현

API 호출을 통해 데이터를 받아올 때, 로딩 화면을 사용자에게 보여준다.

// indax.js
import Axios from "axios";
import Head from "next/head";
import { Header, Divider, Loader } from "semantic-ui-react";
import { useEffect, useState } from "react";
import styles from "../styles/Home.module.css";
import ItemList from "../src/component/ItemList";

export default function Home() {
  const [list, setList] = useState([]);
  // 첫 화면에서 로딩 화면을 만들기 위해 isLoading으로 state 생성
  const [isLoading, setIsLoading] = useState(true);

  const API_URL =
    "http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline";

  function getData() {
    Axios.get(API_URL).then((res) => {
      console.log(res.data);
      setList(res.data);
      // API 호출이 끝나면 setIsLoading는 false
      setIsLoading(false);
    });
  }

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <Head>
        <title>Home | 보리구리</title>
      </Head>
      {isLoading && (
        <div style={{ padding: "200px 0" }}>
          <Loader inline="centered" active size="big">
            Loading
          </Loader>
        </div>
      )}
      {!isLoading && (
        <>
          <Header as="h3">베스트 상품</Header>
          <Divider />
          <ItemList list={list.slice(0, 9)} />
          <Header as="h3">신상품</Header>
          <Divider />
          <ItemList list={list.slice(9)} />
        </>
      )}
    </div>
  );
}

해당 코드에서 궁금했던 부분
// 이 부분의 코드를
  <Header as="h3">베스트 상품</Header>
  <Divider />
  <ItemList list={list.slice(0, 9)} />
  <Header as="h3">신상품</Header>
  <Divider />
  <ItemList list={list.slice(9)} />

{
  !isLoading && <>
  // 여기에 넣는 것과 넣지 않는 것의 차이가 무엇인지..
  </>;
}
왼쪽 화면이 {!isLoading} 적용 전 / 오른쪽 화면이 적용 후
=> {!isLoading} 을 작성하지 않아도 같은 화면을 보여준다고 생각했는데 아래에 가려져서 보이지 않았었다. 잘 확인해볼 것!

최종적으로 삼항연산자로 바꿔서 코드 작성

return (
  <div>
    <Head>
      <title>Home | 보리구리</title>
    </Head>
    {isLoading ? (
      <div style={{ padding: "200px 0" }}>
        <Loader inline="centered" active size="big">
          Loading
        </Loader>
      </div>
    ) : (
      <>
        <Header as="h3">베스트 상품</Header>
        <Divider />
        <ItemList list={list.slice(0, 9)} />
        <Header as="h3">신상품</Header>
        <Divider />
        <ItemList list={list.slice(9)} />
      </>
    )}
  </div>
);

[id].js도 로딩 화면 구현

🔪 정적 생성 / Server Side Rendering

Next.js는 모든 페이지를 사전 렌더링(Pre-rendering) 한다 => 미리 HTML 파일을 만듦
- Pre-rendering은 더 좋은 퍼포먼스를 낸다.
- 검색엔진최적화(SEO)에도 좋다.
Pre-rendering의 2가지 형태 : 차이점은 언제 HTML 파일을 생성하는가
1. 정적 생성 : 유저가 요청하기 전에 미리 페이지를 만들어 놓아도 상관 없을 경우
- 프로젝트가 빌드하는 시점에 HTML 파일들이 생성
  => 한 번 파일들을 쭉 만들어 놓고 호출이 들어올 때마다 재활용
- 모든 요청에 재사용
- 퍼포먼스를 이유로, Next.js는 정적 생성을 권고
- 정적 생성된 페이지들은 CDN에 캐시가 된다.
- getStaticProps / getStaticPaths
1. Server Side Rendering (SSR, Dynamic Rendering) : 요청이 있을 때마다 다시 그릴 경우
- 매 요청마다 HTML을 생성
- CDN에 캐시되지 않기 때문에 조금 느릴 수 있다.
- 서버를 통해 Pre-rendering된 페이지는 항상 최신 상태를 유지
- getServerSideProps

그럼 정적 생성과 서버 사이드 렌더링을 어떻게 적용할 수 있을까?

첫 페이지의 경우, 화면을 그리는 API를 비동기로 호출
=> 일단 첫 화면에 들어온 다음 상품 리스트들을 받기 위해 호출하고 있으므로 정적 생성으로도 충분하다
상세 페이지의 경우, 매번 해당 상품에 대한 내용이 바뀐다.
=> 화면이 보이기 전에 데이터가 있어야 한다.
=> 데이터가 있어야 검색엔진에서 읽을 수 있고, 카카오톡이나 페북으로 공유했을 때 정보가 나온다.
=> 서버 사이드 렌더링으로 구현

// [id].js
import Axios from "axios";
import Head from "next/head";
import Item from "../../src/component/Item";

//  getServerSideProps를 통해 item을 받아올 수 있다.
// 응답값을 item의 props로 넘겨줄 수 있다.
const Post = ({ item }) => {
  // 아이템이 있으면 아이템을 그려준다.
  // 페이지 소스코드를 확인했을 때 데이터들이 잘 나온다면 서버 사이드 렌더링이 잘 동작하고 있는 것
  // 이 데이터를 이용해 SEO, 공유 등이 잘 동작할 수 있다
  // 그리고 항상 최신 상태를 유지되므로 가격이나 판매상태 등이 변경되어도 바로 적용된다.
  // 다만 요청 횟수가 늘어나 퍼포먼스는 떨어진다
  return (
    <>
      {item && (
        <>
          <Head>
            <title>{item.name}</title>
            <meta name="description" content="item.description"></meta>
          </Head>
          <Item item={item} />
        </>
      )}
    </>
  );
};

export default Post;

// getServerSideProps로 서버에서 데이터를 가져옴
// context는 params, 요청, 응답, 쿼리 등의 정보가 담겨져서 온다.
export async function getServerSideProps(context) {
  const id = context.params.id;
  const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
  const res = await Axios.get(apiUrl);
  const data = res.data;

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

Bori

이전 포스트

💣 Next.js_02 Dynamic Routes, next/link

다음 포스트

💣 Next.js_03 Server-side Rendering/SSR

Next.js

Next.js

코딩앙마 Next.js 강의를 보고 정리한 내용입니다.

🔪 로딩 화면 구현

🔪 정적 생성 / Server Side Rendering

그럼 정적 생성과 서버 사이드 렌더링을 어떻게 적용할 수 있을까?

💣 Next.js_02 Dynamic Routes, next/link

💣 Next.js_04 Custom Error Page, Environment Variables

0개의 댓글