SSG로 만든 페이지 ISR로 만들기!

→ revalidate옵션만 붙혀주면 된다!

export const revalidate = false ← 기본값

페이지 컴포넌트 상단에 export const revalidate = 3; 이라고 선언해주면
해당 페이지는 3초에 한번씩 다시 generate한다.

(엄청 간단하네요..)

fetch 사용해서 데이터 가져와보기

• app/products/page.tsx

  import { getProducts } from "@/services/products";
  import Link from "next/link";
  import styles from "./page.module.css";
  
  // export const revalidate = 3;
  
  export default async function ProductsPage() {
    const products = await getProducts();
    const res = await fetch("https://meowfacts.herokuapp.com");
    const data = await res.json();
    const factText = data.data[0];
    return (
      <div>
  			...

  컴포넌트가 async function이기 때문에 바로 await 키워드로 fetch를 사용할 수 있다. 그리고 애플리케이션을 build하고 start해서 확인했을때, 아무리 새로고침해도 fetch하는 동안 발생하는 로딩이 발생하지 않는다!
  → 해당 페이지는 이미 build 과정에서 정적인 HTML로 만들어졌기 때문.
  

우리가 얼마만큼 자주 렌더링을 할 것인지 fetch에서 결정할 수 있다

import { getProducts } from "@/services/products";
import Link from "next/link";
import styles from "./page.module.css";

// export const revalidate = 3;

export default async function ProductsPage() {
  const products = await getProducts();
	const res = await fetch("https://meowfacts.herokuapp.com", {
    next: { revalidate: 3 },
  });
  const data = await res.json();
  const factText = data.data[0];
  return (
    <div>
			...

두번 째 인자로 위 값을 넣어주면 3초에 한 번씩 API를 다시 호출한다.

이렇게 하면 3초에 한번씩 값을 다시 불러와서 보여주는 ISR로 동작한다.

물론 revalidate = 0으로 설정하면 SSR로 동작한다.

fetch 옵션을 통해 ISR을 설정할 수도 있다!

next의 revalidate 옵션 외에도 cache옵션을 통해 설정할 수 있음.

const res = await fetch("https://meowfacts.herokuapp.com", {
    cache: 'no-store'
  });

💡 {next: {revalidate: 3}}을 설정해도 업데이트가 안될 때

cache: "reload",
next: { revalidate: 3 },

cache: “reload” 옵션도 같이 붙혀주면 된다.

CSR

페이지에 올 때 마다 새롭게 보여줘야 하는데..
SSR로 서버에서 매번 렌더링하기엔 서버에 과부화가 올 것 같고, 그렇게 중요하고 의미있는 컨텐츠가 아니고
나중에 렌더링되어도 상관 없다! ⇒ CSR 방식

CSR으로 만들기 위해서는 클라이언트 컴포넌트로 동작해야한다!

CSR로 동작할 컴포넌트만 따로 빼서 ‘use client’를 선언하고

useState와 useEffect 훅들을 사용해서 data를 fetch하고 이를 페이지에 컴포넌트로 넣으면

해당 부분만 CSR로 돌아가는 하이브리드 렌더링 방식이 적용되는 것이다

CSR로 동작한다고 해서 아예 서버에서 읽지 않는 것은 아니고 최대한 정적인 부분은 pre-rendering 하기위해 빌드 과정에서 서버에서 정적으로 HTML 파일이 미리 만들어지고 이후 클라이언트에서 동작할 자바스크립트 파일들을 번들링해서 hydration 과정이 일어난 후 리액트 컴포넌트가 동작하는 것이다.

API Route

app디렉토리의 api 경로에 정해진 규칙대로 API를 작성하고 Vercel에 등록만 해두면
실제 API서버처럼 작동할 수 있다..!

공식문서

함수 네임으로 Method를 작성하는 방식

파일 이름은 route.ts 로 만들어야 한다.

• app/api/products/route.ts

  import { getProducts } from "@/services/products";
  import { NextResponse } from "next/server";
  
  export async function GET(request: Request) {
    const products = await getProducts();
    return NextResponse.json({ products });
  }

function name을 GET 으로 만들면 HTTP GET 요청이 되는 것이다.

return할 때는 NextResponse의 json메소드를 사용하여 리턴하면 잘 동작한다.