[Next.js/TS] Next.js의 렌더링 패턴(SSG,ISR,SSR,CSR)/Route Handler를 사용한 TO Do List

24.3.15

 

🫧 배운 Next.js의 개념을 토대로 간단히 만든 To Do List 프로젝트 

 

기간:  3.12 ~ 3.15 인데, 사실 구현자체는 빨리 끝냈던 거 같다. 

(근데 그 뒤에 json-server - vercel 배포를 시도하다가 오류가 나고... localhost를 127.0.0.1로 바꿔보다가 CORS 에러를 접해서 ㅠㅠ 이를 해결해보고있는 중이다.. )

---

 

0) 홈 메인 페이지

 

 

1) About 페이지

SSG로, (fetch 옵션 - force-cache, 혹은 설정 안해도 됨) 만들어 build 시의 데이터로 고정되어 렌더링.

회사정보에 대한 데이터를 가져와서 보여준다. (companyInfo - image, name, description)

 

* 서버 컴포넌트이기 때문에, 바로 json-server와 연결시켜 데이터를 가져왔다. (route handler 를 통하지않음) 

 

2) Report 페이지

ISR로, revalidate : 10 옵션을 주어 10초마다 데이터 갱신되도록 했다.

todos 데이터의 배열 길이를 통해 할 일 목록이 몇 개가 있는 지 등을 나타냈다.

 

* 서버 컴포넌트이기 때문에, 바로 json-server와 연결시켜 데이터를 가져왔다. (route handler 를 통하지않음) 

 

3) To-Dos-CSR 페이지

CSR (클라이언트 사이드 렌더링)로 구현한 투두리스트 페이지로, CRUD가 가능하다.

(여기서 update는 완료상태 토글만 구현) 

toast library 사용

 

* CSR이기때문에 기존의 React에서 한 것과 동일하다. React-Query를 사용.

그런데 다른 서버컴포넌트와 달리, 클라이언트 컴포넌트인 여기서는 route handler (app/api/.../route.ts)를 백엔드삼아 연결해주기로함.

리쿼를 통해 route handler (백엔드 역할) 와 연결하고, route handler에서 json-server (원래 BaaS지만) 를 DB로 삼아 연결시켜줬다.

즉 CSR (프론트) <-> route handler (백) <-> DB   이렇게 연결된다

 

* 처음에 route handler와 연결 시, 데이터요청 시 특정 id가 필요한  delete나 toggle(수정 patch) 함수의 경우 그냥 fetch - request 로 id 도 같이 넘겨줬었는데, 원래는 route handler - dynamic routing 동적 라우팅을 써야 한다고 한다.?! 

그래서  api 폴더 / todos / [id] 폴더  >> 안에 route.ts 를 만들어 그곳에 DELETE, PATCH 함수를 구현하는 것으로 변경했다.

 

그러면 아래 코드와 같이, request 뿐만 아니라 { param } 객체도 인자로 받아와서 param인 id를 꺼내서 쓰면 된다.

이 route handler 에서는 여기서 db역할을 맡은 json-server로 parameter id를 통해 patch 요청을 보낸다. 

// app/api/todos/[id]/route.ts  - route handler

export async function PATCH(request: Request, { params }: { params: { id: string } }) {
    try {
        // const { id, isDone } = await request.json(); 이제 이렇게 할 필요 X
        const id = params.id;
        const { isDone } = await request.json();
        await fetch(`${process.env.NEXT_PUBLIC_DB_URL}/todos/${id}`, { // json-server 주소
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ isDone: !isDone }) 
        });
        return new Response(null, { status: 204 });
    } catch (error) {
        throw new Error('Internal Server Error !');
    }
}

 

 

4) To-Dos-SSR 페이지

SSR (서버 사이드 렌더링)로 구현한 투두리스트 페이지로, Read 조회만 가능한 상태이다.

유저 요청마다 데이터가 갱신되기 때문에 CSR 과 유사하지만, 서버 사이드에서 렌더링한다는 점!

 

* 서버 컴포넌트이기 때문에, 바로 json-server와 연결시켜 데이터를 가져왔다. (route handler 를 통하지않음) 

 

 

---

 

next.js 의 렌더링 패턴 기초개념은 숙지했지만 .. 자세히 파고들어가면 헷갈리는 것 같기도 하다. 

 

예를 들면 SSR 페이지는 서버컴포넌트이지만 그 안에, 유저와 상호작용하는 '버튼'과 같은 컴포넌트는 클라이언트 컴포넌트이다. 하지만, SSR 페이지에 있는 TodoList 컴포넌트는 서버컴포넌트이고, 또 그 안에 속하는 TodoItem 컴포넌트는 반드시 클라이언트 컴포넌트여야만 동작했다. (여기서 react query usemutation을 활용하는 hook을 불러오기 때문??)  

 

그리고 [parameter] 폴더를 만들어 동적라우팅해서 route handler 활용하기도 연습해보니 좋았지만 다시 공부해봐야 할 거 같다.

 

 

(특히 일단은 .. 아마 route handler 때문에 생긴 배포 에러부터 해결하고 ....ㅎㅎ ㅠㅠㅠ 

json-server 배포도 해보고싶었는데 어렵다..!)