SSR (Server Side Rendering)

SSR은 서버 사이드 렌더링으로 기본적인 사전 렌더링 방식이다.
요청이 들어올때마다 서버에서 사전 렌더링을 진행한다.

장점: 페이지 내부의 데이터를 항상 최신으로 유지 할 수 있다.
단점: 데이터 요청이 늦어질 경우 모든게 늦어진다.

getServerSideProps

ssr 사용시 next.js에서 기본으로 제공해주는 함수이다.

작동 방식은
해당 경로로 요청이 들어옴 -> getServerSideProps가 작동을해서 필요 데이터를 가져옴 -> 해당 page 컴포넌트가 실행이 됨

import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
import style from "./[id].module.css";
import fetchone from "@/lib/fetch-one";

export const getServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const id = context.params!.id; //!로 undefind가 안일어나게 막음
  const book = await fetchone(Number(id));
  console.log(id);
  return {
    props: { book },
  };
};

export default function Page({
  book,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  if (!book) return "다시 시도해주세요";
  const { id, title, subTitle, description, author, publisher, coverImgUrl } =
    book;

  return (
    <div className={style.container}>

1. getServerSideProps는 안에 return값으로 props 값을 통해 객체를 반환한다.

export const getServerSideProps = () => {
return{
  props:{}
}}  

해당 타입은 아래와 같은 타입으로 ssr의 타입을 자동으로 추론해준다.

InferGetServerSidePropsType<typeof getServerSideProps>

부가적으로...
1. getServerSideProps는 사전 렌더링을 하는 그과정에서 딱 한번만 실행이 됨(오직 서버측에서만 실행)
2. window와 같은 브라우저에서 실행되는건 안됨
- Next의 경우 사전 렌더링 때문에 서버,브라우저 통 2번 렌더링 된다 그래서 브라우저에서만 실행되는걸 원한다면 useEffect를 사용한다.

2. context

context: GetServerSidePropsContext

context라는 매개변수에는 현재 브라우저로부터 받은 요청에 대한 모든 정보가 다 포함이 되어있다. 그래서 query값이나 입력된 값을 context에서 추출할 수 있다.

SSG (Static Site Generation)

ssg는 정적 페이지 생성으로 사전 렌더링을 빌드 타임에 진행하여 ssr의 단점인 필요 데이터가 많아질때 속도를 개선할 수 있다.

장점: 사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는 매우 빠른 속도로 응답 가능하다
단점: 빌드 타임에 사전 렌더링을 하기 때문에 페이지 접속 요청을 해도 매번 똑같은 페이지만 응답해서 최신 데이터 반영은 어렵다.

getStaticProps

ssg 사용시 next.js에서 기본으로 제공해주는 함수이다.

import SearchableLayout from "@/components/searchable-layout";
import style from "./index.module.css";
import { ReactNode, useEffect } from "react";

import BookItem from "@/components/book-item";
import { InferGetStaticPropsType } from "next";
import fetchbook from "@/lib/fetch-books";
import fetchrandom from "@/lib/fetch-random";

export const getStaticProps = async () => {

  const [allbooks, recombooks] = await Promise.all([
    fetchbook(),
    fetchrandom(),
  ]);
  // const allbooks = await fetchbook()가 아닌 위와 같이 병렬로 코드 수정함

  return {
    props: { allbooks, recombooks },
  };
};

export default function Home({
  allbooks,
  recombooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  console.log("책들", allbooks);
  useEffect(() => {}, []);
  return (
    <div className={style.container}>
      <section>
        <h3>지금 추천하는 도서</h3>
        {recombooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
      <section>
        <h3>등록된 모든 도서</h3>
        {allbooks.map((book) => (
          <BookItem key={book.id} {...book} />
        ))}
      </section>
    </div>
  );
}

Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

1. getStaticProps는 안에 return값으로 props 값을 통해 객체를 반환한다.

export const getStaticProps = async () => {

  const [allbooks, recombooks] = await Promise.all([
    fetchbook(),
    fetchrandom(),
  ]);
  // const allbooks = await fetchbook()가 아닌 위와 같이 병렬로 코드 수정함

  return {
    props: { allbooks, recombooks },
  };
};

동적 경로에 SSG 적용하기

아래와 같은 동적경로에 SSG를 적용하려면 먼저 getStaticPaths를 통해 먼저 렌더링 될 경로를 설정하고 getStaticProps를 통해 선언한 경로를 사전렌더링을 진행한다.

getStaticPaths

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } }, // url 파라미터는 반드시 문자열로
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: true,
    // 대비책으로 위에서 미리 설정하지 않은 페이지로 접속시 대비책을 설정,
    // false로 지정하지 않은 페이지는 Not found됌
    // "blocking"은 미리 지정하지 않는 경로가 실행시 ssr 로 실행이 됨
    // true는 먼저 getstaticprops를 실행하지 않는 페이지를 반환하고 그리고 getstaticprops를 적용하여 렌더링 시킴
  };
};

1. paths를 통한 경로 설정

이때 url 파라미터는 반드시 문자열로 명시해야한다.

 paths: [
      { params: { id: "1" } }, 
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],

2. fallback

fallback: 페이지 컴포넌트가 서버로부터 데이터를 전달받지 못한 상태를 말한다.

fallback 종류
False: 404 not found
blocking: ssr 방식
True: ssr방식 + 데이터가 없는 폴백 상태의 페이지로 부터 반환

• Fallback:false
  없는 경로로 요청시 false:404 not found로 반환 된다.

• Fallback:”blocking”
  미리 지정하지 않는 경로가 실행시 ssr 로 실행이 된다.
  그리고 .next/server/page 폴더에 html형태로 저장이 된다.
  

해당 방법 사용시에 사전 렌더링에 추가적인 데이터가 필요해서 사전 렌더링 시간이 길어지면 로딩이 발생할수 있어서 페이지에 따라서 오랜 시간을 기달려야 할 수도 있다.

• Fallback:true
  접속요청이 오면 먼저 서버에서 props(벡엔드서버에서의 데이터 불러오는작업) 없는 페이지를 반환하고
  서버에서는 props를 계산하고 props만 따로 반환한다.

  props는 getStaticProps부분이다.

npm run build ..

1. Next.js는 ssr,ssg를 따로 정의하지 않으면 static 페이지로 정의를 한다.

2. f,Dynamic은 브라우저에서 요청을 받을때마다 다이나믹하게 페이지가 사전 렌더링이 된다. 즉 ssr로 작동하는 컴포넌트이다.

3. 모든 api 라우츠들을 다이나믹하게(ssr)로 작동하게 한다.