💡Next.js에 대해서💡

next-js-tips.md

Next.js tips💡

• layout.tsx & template.tsx :

  페이지간 이동이 일어날때 리렌더링이 일어나지 않게 하려면 layout.tsx를 사용 아니면 template.tsx(마운트) 사용합니다. 페이지 이동시 기록(로그)등을 남기려면 template.tsx를 사용하면 유용합니다.

• Fetching :

Next.js를 사용할때는 데이터 패칭과 관련된 동작은 가능한 한 서버 컴포넌트에서 작성하는 것을 추천합니다.

---

• Caching :

캐싱을 더 잘 이해하기 위해서는 데이터를 어디에 저장할 수 있는지에 대해 우선 이해하는 것이 중요합니다. 데이터는 크게 메모리, 파일 시스템 그리고 네트워크 이렇게 3개의 장소에서 가져 올 수 있습니다. 가져오는 속도는 메모리, 파일 시스템 그리고 네트워크 순으로 빠릅니다. Next.js는 내장 데이터 캐시를 제공합니다. fetching을 통해 데이터를 가져오면 가져온 결과를 파일 시스템 기반의 캐시에 저장합니다. 결과적으로 동일한 URL의 재요청을 보내는 경우 다시 데이터를 요청하는 대신에 캐시에서 빠르게 가져올 수 있습니다. 물론 데이터 캐싱 동작에 대한 통제권은 개발자에게 있기 때문에 자주 변경되는 데이터의 경우 캐싱을 비활성화 함 으로써 최신의 데이터를 렌더링 할 수 있습니다.

예제코드

fetch('uri',{
cache: "no-store"
}) // 데이터가 자주 변경되는 경우 유용하게 사용할 수 있습니다.

fetch('uri',{
next: {revalidate: 10},
}) // 캐싱을 특정 시간 동안만 유지하고, 그 이후에는 다시 요청을 보내 최신 버전을 캐싱하고 싶은 경우에 사용합니다.

캐싱 활성화 여부는 fetch 함수에서만 사용 할 수 있습니다.(axios 등 3rd-party 라이브러리에서는 사용이 불가합니다.)

• Static Rendering and Dynamic Rendering :

Static : 정적 렌더링은 변하지 않는 데이터가 있는 컴포넌트를 프로덕션 빌드 시점에 렌더링하고 이후 해당 컴포넌트가 필요한 경우 이를 재렌더링하는 대신에 캐싱해 저장해둔 데이터를 이용해 해당 컴포넌트를 가져올 수 있는 렌더링 입니다.

• Dynamic : 웹 페이가 클라이언트 측에서 요청 시에 동적으로 생성되며, Javascript를 사용하여 페이지 상태 및 내용을 동적으로 조작하는 방식을 나타냅니다.

• Next.js는 프로덕션 모드가 아닌 개발 모드에서는 별도의 정적 렌더링 없이 매번 새로운 요청을 보내는 동적 렌더링 방식으로 동작하게 됩니다. 그러나 프로덕션 모드로 빌드하면 데이터들을 정적 데이터로 취급하기 때문에 최초 렌더링한 데이터를 캐싱에 저장해두고 필요할 때마다 저장해둔 걸 재사용합니다. 그러나 해당 컴포넌트에서 캐싱을 비활성화하면 Next.js는 이 페이지의 내용이 변경되는 것 으로 간주해 동적 렌더링 방식으로 해당 컴포넌트를 처리합니다. 그러면 Lambda 아이콘이 보이며 이 것은 정적 렌더링이 아닌 동적 렌더링 방식으로 동작함을 의미합니다.

• Production Build는 개발자가 작성한 어플리케이션 코드와 리소스를 최적화된 형대로 번들링하고, 불필요한 정보를 제거하여 웹 어플리케이션을 실제 사용을 위한 최종 제품으로 만드는 프로세스를 의미합니다. 프로덕션 빌드를 통해 어플리케이션의 성능을 최적화 하고, 사용자에게 빠르고 안정적인 웹 경험을 제공할 수 있게 됩니다.

• Prallel Routes : 한 화면에 두 개의 페이지를 보여줄때 사용한다.

@parallel 이런식으로 폴더명을 정의해주고 Layout 페이지에서 {parallel} 이렇게 prop 으로 렌더링되게 하면 됩니다. 사용시 중요한 점은, layout.tsx와 @parallel은 같은 경로에 있어야 사용이 가능합니다. layout.ts 에서 props로 {children}{parallel} 이런식으로.

• Intercepting Routes : 라우트를 가로채면 브라우저 url을 랩핑하면서 현재 레이아웃 내에서 새 경로를 로드할 수 있습니다. 그러므로 현재 페이지의 컨텍스트를 유지하고 싶을때 사용하면 유용합니다.

상대경로 ../ , ./ 이것과 비슷하게 (..) , (.) 이런식으로 경로를 탐색하고 그뒤에 해당 경로에 있는 라우트의 이름을 적습니다. (..)about = 이것은 부모 디렉토리의 about 페이지를 명시하는 것입니다. (.)posting = 이것은 현재 폴더의 posting 페이지를 명시합니다. 그리고 중요한 부분은, 인터셉트를 당한 원래 url에 해당하는 경로는 필요가 없을 것 같지만, 새로고침이나, url창에 직접 작성하여 접속하는 경우 실행이 되게 됩니다. 그렇지 않고 태그를 통해서 올 경우에는 인터셉트를 당해서 렌더링 되지 않습니다.

• Route Groups : 실제 uri에 영향을 주지않는 경로.

(group) 이런식으로 그룹명을 지어서 디렉토리를 생성하는데, 실제 uri에는 영향을 주지 않습니다.

• Private folder : 폴더 정리용으로 사용합니다. 중복을 제거 할 때 좋습니다.

_private 이런식으로 폴더의 이름을 정의하고 나면

• useRouter : 클라이언트에서 리다이렉트하는 훅.

예제코드

const router = useRouter();
router.replace(href:"/home"); // replace는 단순히 uri만 교체하고 히스토리 객체에는 추가되지 않기 때문에, 뒤로가기 시에 문제없이 '/'으로 이동이 가능하다(혹은 그전에 머물렀던 페이지)
return null

const router = useRouter();
router.push(href:"/home"); // push를 사용할 경우에는 히스토리 객체에 추가하여서, 뒤로가기를 사용할 때 문제가 된다. 뒤로가기를 하면 리다이렉트를 했던 페이지로 돌아가기 때문에, 다시 /hom으로 와지는 결과를 초래한다. 
return null