아 여윽시 공식문서 공부하는건 드럽게 재미없음 ㅜㅜ

어제공부하다가 동적라우팅 몰라서 포스팅했었음. 되짚어 보자면

❓ 동적라우팅이란?

• 라우팅은 네트워크로 향하는 경로이다. 동적라우팅은 그 경로를 동적으로, query 값을 받아서 동적으로 네트워크 정보를 프로토콜을 이용하여 학습하고 유지하는걸 의미한다.
• 예를들어 http://love.com/10이란 경로가 있다면, 정적라우팅은 바로 10의 쿼리를 갖는 네트워크 경로에 접근하지만, 동적라우팅은 http://love.com/[id]로 query에 해당하는 동적으로 브라우저와 네트워킹한다.

✨ Pages

◼ PreRendering (사전랜더링)

Next.Js의 가장 큰 강점은 사전랜더링이다. 사전랜더링에 대한 이점에 대해서 알아보려면 SSR에 대해서 알아야한다.

❓ SSR(서버사이드 랜더링)이란?

• 서버에서 랜더링 작업을 하는 것이다. 리액트같은 CSR 환경같은 경우는 브라우저에서 서버에 JS를 요청할때 JS파일로 요청받아 브라우저에서 그려진다. 하지만 SSR 환경에서는 서버에서 브라우저에 그려질 파일을 요청받을 때 Html파일로 받아 브라우저에 그려지게 된다.

그래서 사전랜더링이 NEXT.JS 플로우상으로 가능해진다! html 파일로 만들어져서 브라우저에 전달하기 때문에 기본적으로 모든페이지를 미리 랜더링한다는 프리랜더링이 가능해진다.

💪🏻 PreRendering 장점

• SEO 검색엔진 최적화
• staticGenerator에서 파일 재사용 가능

◼ Two forms of Pre-rendering(두가지 형태의 사전랜더링)

• Static Generation: HTML을 빌드 타임에 생성한다. pre-render된 HTML은 그 다음에 각 리퀘스트에서 재사용된다.
• Server-Side Rendering : HTML을 각 리퀘스트가 일어날 때 생성하는 방식이다.

🔹 Static Generation

페이지가 정적생성을 사용할 경우 HTML은 빌드 시 생성된다. next build를 할 경우 HTML이 생성되며, 각 요청에서 재사용된다. CDN에서 캐시할 수 있다.

🗨 CDN이란?

• Content Delivery Network의 약자로서, 분산된 여러 개의 서버이다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높이고, 사용자는 가까운 서버를 통해 웹 활성화 디바이스 또는 브라우저에서 인터넷 콘텐츠를 빠르게 접속할 수 있다.
• CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱한다. 콘텐츠가 로딩될 때까지 기다릴 필요 없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등의 작업을 할 수 있다.

✔ Static Generate를 사용하는 경우

한번 만들고 재사용하므로, 속도가 빠르다.

• 마케팅 페이지
• 블로그 게시물 & 포트폴리오
• 전자상거래 제품 목록
• 도움말 & 목록

export된 async함수를 허용하며, getStaticProps이 함수는 빌드 시 호출되며 가져온 데이터를 props를 사전 렌더링 시 페이지에 전달할 수 있습니다.

◼ Static Generate Example1 - 페이지 콘텐츠 가 외부 데이터에 의존

// Index.tsx
import React from "react";
import axios from "axios";
const Home = ({ data }) => {
  console.log(data);
  return (
    <>
      <h1>Hello World!</h1>
    </>
  );
};
export async function getStaticProps() {
  const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`).then((res) => res.data);
  return {
    props: {
      data: res,
    },
  };
}
export default Home;

◼ Static Generate Example2 - 외부 데이터에 따른 페이지 경로

미리 랜더링되는 페이지 경로는 외부 데이터에 따라 달라진다. 이를 처리하기 위해 Next.JS를 사용하면 동적 페이지 호출

//pages/[userId]/index.tsx
import React from "react";
import axios from "axios";
type PostType = {
  userId: number;
  id: number;
  title: string;
  body: string;
};
export default function postPage({ posts }: { posts: PostType[] }) {
  return (
    <div>
      {posts?.map((post: PostType, index: number) => (
        <ul key={index}>
          <li>UserID{post.userId}</li>
          <li>Title : {post.title}</li>
          <li>Body : {post.body}</li>
        </ul>
      ))}
    </div>
  );
}
export async function getStaticPaths() {
  const data = await axios
    .get(`https://jsonplaceholder.typicode.com/posts`)
    .then((res) => res.data);
  const paths = data.map((post: PostType) => ({
    params: { userId: String(post.userId) },
  }));
  return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
  const posts = await axios
    .get(`https://jsonplaceholder.typicode.com/posts?userId=${params?.userId}`)
    .then((res) => res.data);
  return {
    props: { posts },
  };
}

1. 들어올 데이터의 타입을 지정한다.
2. getStaticPaths로 데이터를 패칭해서 params를 미리 지정해준다. (NEXT.JS 가 프리랜더링 해서 미리 데이터가 들어올 페이지를 만들어두는 작업)
3. getStaticProps로 사전 렌더링 할 페이지 데이터를 패칭한다.
4. page에서 props로 데이터를 전달받는다.

🔹 SSR (Server Side Rendering)

페이지에서 서버 측 렌더링 을 사용하는 경우 페이지 HTML은 각 요청 에서 생성된다.

예를 들어 페이지에서 자주 업데이트되는 데이터를 미리 랜더링 해야 한다고 했을 때,
getServerDierProps로 데이터를 가져와 페이지에 전달한다.

import React from "react";
import axios from "axios";
import { API_KEY } from "../variable/api";
interface Article {
  source: {
    id: null;
    name: void | string;
  };
  author: string | void;
  title: string;
  description: string;
  url: string;
  urlToImage: string;
  publishedAt: Date;
  content: string | void;
}
interface News extends Article {
  status: string;
  totalResults: number;
  articles: Article[];
}
const Home = ({ data }: { data: News }) => {
  return (
    <>
      <h1>News Data</h1>
      {data.articles.map((post: Article, index: number) => (
        <div key={index}>
          <h2>{post.title}</h2>
          <img src={post.urlToImage} alt="" />
          <p>{post.description}</p>
        </div>
      ))}
    </>
  );
};
export default Home;
export async function getServerSideProps() {
  const data = await axios
    .get(`https://newsapi.org/v2/top-headlines?country=kr&apiKey=${API_KEY}`)
    .then((res) => res.data);
  return {
    props: { data },
  };
}

getServerSideProps는 빌드 시간이 아닌 모든 요청에 대해 실행된다.

◼ 요약

• getStaticProps : HTML은 빌드 시 생성되며 각 요청에서 재사용.
  사용자의 요청에 앞서 미리 렌더링할 수 있는 페이지에 적합. 클라이언트 측 렌더링과 함께 사용하여 추가 데이터를 가져올 수도 있음.
• getServerSideProps : HTML은 각 요청 에 대해 생성. 페이지에서 서버 측 렌더링을 사용하도록 하려면 getServerSideProps.