2023. 9. 19. 22:27ㆍTrip to Next.js
넥스트js의 핵심 키워드는 프리 렌더링
서버에서 미리 리액트 컴포넌트를 HTML로 바꾸어 클라이언트로 보내준다. 이 것을 받은 클라이언트는 react.js가 되고 리액트 환경에서 작동한다. 비로소 리액트와 연결되면 동적인 페이지 이용이 가능하다. 이 프로세스가 Hydration 이다.
1. 링크를 걸때는 리액트와 똑같이 Link를 쓰지만 to 가 아니라 href를 쓴다.
useRouter 빌트인 훅을 사용하면 라우팅 정보가 나온다.
2. module css 시스템을 쓴다. 리액트에서는 {`${style.~~~}`}로 쓰는데 여기도 똑같다. 근데 모듈화는 좀 불편하다.
3. styled jsx 방식이 있다. 모듈처럼 클래스명이 충돌하지 않는다.
4. 전역으로 스타일 설정할 때는 jsx global을 통해서 할 수 있는데 그래도 페이지 별로 영향을 주지는 못한다. 아래 컴포넌트는 영향을 줄 수 있음. 전역을 위해서는 layout.tsx를 만들고 처리하자
5. 백엔드로 구축이 가능하다.
상호작용하는 역할은 클라이언트 컴포넌트 변동 사항이 없는 것은 서버 컴퍼넌트로 만든다.
변동 하지 않는 것은 서버에서 출력해서 js 파일을 최대로 줄인다.
import Link from "next/link";
import "./globals.css";
import type { Metadata } from "next";
// export const metadata: Metadata = {
// title: "Create Next App",
// description: "Generated by create next app",
// };
interface Topic {
id: number;
title: string;
body: string;
}
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const res = await fetch("http://localhost:9999/topics");
const topics = await res.json();
return (
<html>
<body>
<h1>
<Link href="/">WEB</Link>
</h1>
<ol>
{topics.map((topic: Topic) => {
return (
<li key={topic.id}>
<Link href={`/read/${topic.id}`}>{topic.title}</Link>
</li>
);
})}
</ol>
{children}
<ul>
<li>
<Link href="/create">Create</Link>
</li>
<li>
<Link href="/update/1">Update</Link>
</li>
<li>
<input type="button" value="delete" />
</li>
</ul>
</body>
</html>
);
}기존에 클라이언트 컴포넌트로 짜면 state와 effect로 불러와야하지만 SSR을 통해서 JS를 줄여준다.
.map 이 메서드가 아니라는 오류가 떠서 뭔가 싶었는데 topics를 가져와라고 하고 json데이터를 보니 topic으로 명명해서 못가지고 오고 있었다. 오타로 에러가 나면 찾기가 힘들다. map 앞이 배열이 아니라고 하는데 json인데 왜 아니지만 반복하고 있다가 오타를 찾았다.
그리고 fetch가 실패하길래 뭐지 싶었는데... 오랜만에 서버를 다루다보니 서버를 키는 것을 잊었다.
node 명령어로 켜주면 된다.
npx json-servercols, rows 다 string으로 적는 것을 잊지 말고
6. client 컴포넌트에서 async를 쓰지말라고 한다;; 그냥 then으로 쓰면 된다.
7. 목록 최신화가 안되는데 cache: MISS, cache: HIT / revalidating으로 해결 가능. 간단하게는 그냥 성능을 희생하고 캐시를 지우면된다. 나중에 revalidating으로 해결하자.
결론: 앱 라우팅에 대해서 간단하게 배워보았지만 일단 페이지 라우팅이 더 안정적이고 이미 자리를 잡은 상태라 페이지 라우팅으로 프로젝트를 시작한다.
'Trip to Next.js' 카테고리의 다른 글
| Property 'title' does not exist on type 'EventTarget'.ts(2339) (0) | 2023.09.21 |
|---|