Pages RouterHead페이지 별로 Head 컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다.import Head from "next/head";export default Page() { return ( 타이틀 // ... );} Fallback 상태에서의 SEO 처리동적 라우팅을 사용하는 페이지(예: 아이템별 상세 페이지)에서 fallback:true를 설정했을 때, 지정하지 않은 경로에 대해 SSR과 유사하게 동작한다. 이때 초기 HTML에 SEO 관련 메타 데이터가 포함되지 않는 문제가 발생할 수 있는데, 이를 방지하기 위해 fallback 상태에서..

웹 애플리케이션의 렌더링 방식과 Next.js웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Cdevmark.tistory.com서버 사이드 렌더링 (SSR)요청이 들어올 때마다 사전 렌더링을 진행하는 방식getServerSideProps커포넌트보다 먼저 실행되어서 컴포넌트에 필요한 데이터를 불러오는 함수export const getServerSideProps = () => { const data = "hello"; return { props: { data, }, };};export default function Page({ d..

Pre-fetching이란?Pre-fetching은 페이지를 사전에 미리 불러오는 기능이다. 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는다. Next.js는 이 기능을 통해 이동을 위한 데이터를 미리 불러와 놓음으로써 페이지 이동을 매우 빠른 속도로 지체 없이 처리할 수 있게 해준다. Link 컴포넌트 사용기본적으로 Link컴포넌트로 명시된 경로는 프리페칭이 된다. index search book/1프리페칭 해제 방법search Programmatic NavigationProgrammatic Navigation이란?프리페칭 설정 방법import { useRouter } from "next/router";export default function ..

페이지 라우터 (Pages Router)기존 방식에서는 _app.tsx를 통해 전역(Global) 레이아웃을 정의하고,특정 페이지에서만 별도의 레이아웃을 적용하고 싶을 때는 getLayout 패턴을 사용한다..├── src│ ├── components│ │ ├── global-layout.tsx│ │ └── searchable-layout.tsx│ ├── pages│ │ ├── _app.tsx│ │ ├── book│ │ │ └── [[...id]].tsx│ │ ├── search│ │ │ └── index.tsx글로벌 레이아웃// global-layout.tsxexport default function GlobalLayout({ childr..

페이지 이동Link index search book/1 Programmatic Navigation사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족했을 경우에 어떤 함수 내부에서 페이지를 이동시키는 방법import { useRouter } from "next/router"; // 페이지 라우터 버전import { useRouter } from "next/navigation"; // 앱 라우터 버전export default function App() { const router = useRouter(); const onClickButton = () => { router.push("/test"); }; return ( ..

경로 페이지Pages Router.├── src│ ├── pages│ │ ├── _app.tsx│ │ ├── _document.tsx│ │ ├── index.tsx│ │ └── search│ │ └── index.tsx // '/search'│ │ └── search.tsx // '/search/settiㅍng' App Router.├── src│ ├── app│ │ ├──layout.tsx│ │ ├── page.tsx│ │ └── search│ │ └── page.tsx // '/search' 쿼리 스트링'/search?q=쿼리스트링' Pages Routerimport { useRouter } fro..

문제 상황프로젝트를 진행하던 중 사용자가 팔로우/언팔로우 버튼을 클릭할 때, 프로필 정보가 즉시 업데이트되지 않고 페이지를 새로고침해야만 변경 사항이 반영되는 문제가 발생했다.이 문제는 사용자 경험을 저하시키는 상황이기때문에 반드시 개선이 필요했다.원인 분석팔로우 버튼을 클릭하면 팔로우 상태를 변경하는 함수가 Sanity의 데이터를 업데이트한다. 하지만 이 변경 사항이 클라이언트 화면에 즉시 반영되지 않았다.Next.js는 성능 최적화를 위해 서버에서 가져온 데이터를 캐싱한다. 팔로우 상태가 변경되어도 Next.js는 여전히 이전에 캐싱된 데이터를 사용하고 있었기 때문에, 사용자가 보는 화면은 업데이트되지 않은 상태로 유지되었다.서버 사이드에서 데이터 변경이 발생한 후, 클라이언트의 캐시를 재검증(rev..

웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Client Side Rendering)클라이언트 사이드 렌더링은 웹 페이지의 렌더링을 사용자의 브라우저가 담당하는 방식이다. 사용자가 웹 페이지를 요청하면 서버는 가장 기본적인 HTML 구조인 텅 빈 index.html을 먼저 전달하고, 이후 필요한 자바스크립트 파일과 리액트 컴포넌트 등을 클라이언트로 전송한다.동작 과정사용자가 웹 페이지에 접속하면 서버는 초기 구조만 있는 index.html을 전송브라우저는 이 HTML 파일을 받은 후, 리액트 라이브러리와 컴포넌트들을 서버로부터 다운로드리액트가 로드되고 ..