[next.js] 생활코딩 Next.js 13 3일차

* 범위 : 13~17

 

* 13. cache

https://nextjs.org/docs/app/building-your-application/caching

Building Your Application: Caching | Next.js

 

- cache란?

nextjs는 한번 불러온 정보를 .next에 저장함

처음 불러온 경우 통신 시 (cache: MISS)가 뜨고, 리로드 시 (cache: HIT)가 뜸

HIT가 뜬다는 건 cache를 사용했다는 뜻

=> 이로 인해 글목록에 새로 작성한 내용이 업데이트 되지 않음

      이걸 해결하기 위한 2가지 방법이 revalidate와 cache:'no-store'

 

- revalidate

const resp = await fetch(
    process.env.NEXT_PUBLIC_API_URL + `topics/${props.params.id}`,
    {
      // 0으로 해서 0초 유지한다는 뜻
      next: { revalidate: 0 },
    }
  );

- cache

cache: 'no-store'

 

* 14. update & delete 버튼 구현

- useParams는 client component에서만 사용 가능

https://nextjs.org/docs/app/api-reference/functions/use-params

Functions: useParams | Next.js

 

- server component에서 useParams 사용하려면??

일부만 client component화하기

=> Control.js 파일 만들어줌

"use client";
import Link from "next/link";
import { useParams } from "next/navigation";

export function Control() {
  const params = useParams();
  const id = params.id;

  return (
    <ul>
      <li>
        <Link href="/create">Create</Link>
      </li>
      {id ? (
        <>
          <li>
            <Link href={"/update/" + id}>Update</Link>
          </li>
          <li>
            <input type="button" value="delete" />
          </li>
        </>
      ) : null}
    </ul>
  );
}

 

* 15. 글 수정

- 경로 : src > app > update > [id] > page.js

"use client";

import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function Update() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const router = useRouter();
  const params = useParams();
  const id = params.id;

  useEffect(() => {
    fetch("http://localhost:9999/topics/" + id)
      .then((resp) => resp.json())
      .then((result) => {
        setTitle(result.title);
        setBody(result.body);
      });
  }, []);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const title = e.target.title.value;
        const body = e.target.body.value;
        const options = {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ title, body }),
        };

        fetch(`http://localhost:9999/topics/` + id, options)
          .then((res) => res.json())
          .then((result) => {
            console.log(result);
            const lastId = result.id;
            router.refresh();
            router.push(`/read/${lastId}`);
          });
      }}
    >
      <p>
        <input
          type="text"
          name="title"
          placeholder="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </p>
      <p>
        <textarea
          name="body"
          placeholder="body"
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
      </p>
      <p>
        <input type="submit" value="create" />
      </p>
    </form>
  );
}

 

* 16. 글 삭제

- DELETE method 이용해 fetch하고, useRouter로 페이지 이동하기

"use client";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useRouter } from "next/router";

export function Control() {
  const params = useParams();
  const router = useRouter;
  const id = params.id;

  return (
    <ul>
      <li>
        <Link href="/create">Create</Link>
      </li>
      {id ? (
        <>
          <li>
            <Link href={"/update/" + id}>Update</Link>
          </li>
          <li>
            <input
              type="button"
              value="delete"
              onClick={() => {
                const options = { method: "DELETE" };
                fetch("http://localhost:9999/topics/" + id, options)
                  .then((resp) => resp.json())
                  .then((result) => {
                    router.push("/");
                    router.refresh();
                  });
              }}
            />
          </li>
        </>
      ) : null}
    </ul>
  );
}

 

* 17. 환경변수

- fetch의 api url 관리하기

https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

Configuring: Environment Variables | Next.js

 

- 먼저, .env.local 파일을 만들어줌

API_URL=http://localhost:9999/

 

- server component에서 사용하는 법

  const resp = await fetch(process.env.API_URL + "topics", {
    cache: "no-store",
  });

 

- client component에서 사용하는 법

보안을 위해 server component와 다른 방식으로 사용

 

1) .env.local 파일을 수정

NEXT_PUBLIC_API_URL=http://localhost:9999/

2) fetch 코드 아래와 같이 작성

 fetch(process.env.NEXT_PUBLIC_API_URL + `topics`, options)
          .then((res) => res.json())
          .then((result) => {
            console.log(result);
            const lastId = result.id;
            router.refresh();
            router.push(`/read/${lastId}`);
          });

 

=> .gitignore을 확인해보면 기본적으로 next는 .env*.local 파일을 버전관리 못하게 해놨음

---

지금은 cache를 no-store로 설정하여 임시방편으로 해결했으나 앞으로 좋은 퍼포먼스를 내는 페이지를 만들려면 공부 필수!!!