Next.js : 데이터 조회 (서버 컴포넌트) & 새글 작성( 클라이언트 컴포넌트) + 캐시

1. 읽기 (READ) : 서버 컴포넌트 

 

read 폴더 > [id] 폴더 > [page.js]

(1) 여기는 데이터를 읽어서 출력할 뿐! 사용자와 상호 작용 x => server 컴포넌트 이용!

(2) 데이터를 가져올 때는 async + await로 변경

export default async function Read(props) {

    const response = await fetch(`http://localhost:9999/topics/${props.params.id}`);

    const topic = await response.json();

    return (

        <>

            <h2>Read</h2>

            {topic.body}

        </>

    );

}

 

2. 오류 해결  (.next 파일 삭제 후 재실행)

▶ 해결

(1) dev 서버 재실행 : npm run dev  ==> 했는데도 오류 발생하면 (2)+(3) 실행

(2) .next 파일 삭제 : rm -rf .next

(3) dev 서버 재실행 : npm run dev

 

3. 새글 작성 (Create) : 클라이언트 컴포넌트 

(1) [웹 동작 원리]

데이터 입력 후 버튼(create) 누르면 : 데이터를 서버에 전송을 위해 페이지가 전환됨

=> event.preventDefault();함수로 방지해줌

 <form

            onSubmit={(event) => {

                event.preventDefault();

                const title = event.target.title.value;

                const body = event.target.body.value;

            }}

 >

 <p>

                <input type="text" name="title" placeholder="title"></input>

            </p>

            <p>

                <textarea name="body" placeholder="body"></textarea>

            </p>

▶title 변수 : target은 form 태그 + title이라는name 의 value값 저장

 

(2) 데이터 전달 + 저장

'use client';

export default function Create() {

    return (

        <form

            onSubmit={(event) => {

                event.preventDefault();

                const title = event.target.title.value;

                const body = event.target.body.value;

                const options = {

                    method: 'POST',

                    headers: {

                        'Content-Type': 'application/json',

                    },

                    body: JSON.stringify({ title, body }), //json타입으로 전환

                };

                fetch(`http://localhost:9999/topics/`, options)

                    .then((res) => res.json())

                    .then((result) => {

                        console.log(result);

                    });

            }}

        >

▶ 옵션값을 설정해줘야함 (method / headers / body)

 

(3)  생성된 데이터 보여주기 => useRouter 

 

import { useRouter } from "next/router";

▶ 넥스트 12버전 page router의 내용이여서 오류가 발생함 (현재 나는 13번전임)

 

import { useRouter } from "next/navigation"; // 넥스트 13버전 (app router)

▶ App router(넥스트 13버전) router는 이걸 import 해줘야함

 

▶ 리디렉션 하려면 router.push 를 사용하면 가능

 

 

4. 새글 작성 (Create) : 클라이언트 컴포넌트  + 캐시

3번까지하면 데이터는 추가되는데 (url 이동 완료 + db.json에 저장 잘 됨)

화면에는 react 항목이 안 보임 => 새로고침하면 보임

=> 이것을 해결하기 위해 캐시를 이해해야함.!

 

* 개발환경 끄기 : ctrl + c

* .next 파일 지우기 : rm -rf .next 

* dev 개발환경 시작 : npm run dev

 

★글 생성 후 서버 컴포넌트를 refresh하기 전에 캐시를 지우기!

=> 간단한 해결 방법 : 패치를 이용해서 데이터를 가져온 후 에 캐시로 안 만들기!! 

★ 캐시 끄는 방법  (1)

- 패치할때 옵션 값을 주면 됨 => 뒤에 숫자만큼만 캐시를 유지하겠다. => 그래서 0으로 해주면 됨 (캐시 사용x)

★ 캐시 끄는 방법  (2)

- 패치할때 옵션 값을 주면 됨 => 캐시 안 사용하겠다.( no-store )

[layout.js]

export default async function RootLayout({ children }) {

    const resp = await fetch('http://localhost:9999/topics', { cache: 'no-store' });

 

create > [page.js]

=> 화면 반영이 안 될경우, push 아래로 refresh 사용

 

 

▼ fetching할때 캐시 옵션 설정

Data Fetching: Fetching, Caching, and Revalidating | Next.js

---

 

=> next.js 에서는 Revalidating ==> 다음에 직접 공부해보기

▼ Revalidating 

Data Fetching: Fetching, Caching, and Revalidating | Next.js

▼ 캐시

Building Your Application: Caching | Next.js

 

끝.

 

[출처] 생활코딩