Next 앱 SEO 설정하기Next 에서는 React와 달리 각 페이지별로 메타 태그를 별도로 설정할 수가 있다.import Head from "next/head";(...)export default function Home({ allBooks, recoBooks}: InferGetStaticPropsType) { return ( 한입북스 지금 추천하는 도서 {recoBooks.map((book) => ( ))} 등록된 모든 도서 {allBooks.map((book..
Next.js
ISR(Incremental Static Regeneration) 이란?ISR 는 증분 정적 재생성으로 쉽게 말해서 SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술이다. ISR은 SSG 방식의 단점을 보완할 수 있는데, 전 게시물에 설명한 SSG 사전 렌더링 방식은 빌드 타임에 한번만 사전 렌더링(페이지 생성)을 진행하여 다시 빌드하지 않으면 최신 데이터를 반영하기 어렵다. 그러나 ISG 방식은 SSG 처럼 정적 페이지를 생성하면서 특정 시간을 설정하여 그 시간 이후에 새로운 데이터를 반영한, 업데이트된 페이지를 재생성하여 최신 데이터가 포함된 페이지를 제공할 수 있다. 물론 일정 시간을 주기로 딱 맞춰서 페이지가 업데이트 되는 것은 아니고, 만약 60초를 기준으로 새로운 페..
지난 게시물 서버 사이드 렌더링(SSR) 방식에 정적 사이트 생성(SSG) 방식에 대해 알아보고자 한다. 정적 사이트 생성(SSG)SSG 방식은 빌드 타임에 미리 페이지를 사전 렌더링 해두는 방식이다. 위의 그림과 같이 npm run build 명령어로 빌드할 때, 사전 렌더링을 진행해서 페이지를 미리 딱 한번만 생성하고 더이상 페이지를 생성하지 않는다.그리고 빌드가 완료된 이후에 실제 넥스트 앱을 가동하면 브라우저가 접속 요청을 보내면 넥스트 서버는 빌드 타임에 미리 만들어둔 페이지를 바로 제공하게 된다. 그리고 그럼으로써 사용자는 매우 빠른 시간 안에 완성된 화면을 볼 수 있게 된다.정리하면 이러한 과정으로 인해 SSG 사전 렌더링 방식은 사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요..
(참고) React App 에서의 데이터 페칭Next 의 데이터 페칭을 알아보기 전에 React App 에서의 데이터 페칭은 아래 사진의 과정처럼 진행된다.그러나 이 방식의 단점은 초기접속 요청으로 부터 데이터 로딩까지 오랜 시간이 걸린다는 점이다.데이터 로딩이 긴 이유는 위의 사진의 3번에 해당하는 컴포넌트가 마운트 된 이후에 이루어진 이후에 데이터를 요청하기 때문이다.Next.Js 의 데이터 페칭 : 사전 렌더링Next 는 React 와 달리 데이터 요청 및 로딩의 소요시간을 걱정하지 않아도 되는데,이는 Next 에서 React의 느린 FCP 문제를 해결하기 위해서 사전 렌더링이라는 방식으로 동작하는데, 사전 렌더링 과정에서 백엔드 서버로부터 현재 페이지에 필요한 데이터를 미리 불러오도록 설정이 가능..
1. 글로벌 레이아웃 설정하기모든 페이지에 적용이 되어야하는 글로벌 레이아웃을 설정하려면 루트 컴포넌트인 App 컴포넌트에 설정해준다.그러나 App 컴포넌트 안에 레이아웃을 구성하는 코드가 너무 길어질 경우 가독성이 떨어지므로 글로벌 레이아웃을 _app.tsx 파일에 직접 작성하기 보다는 별도의 컴포넌트를 파일로 만들어서 코드를 분리하는 것이 좋습니다.그래서 src / components 폴더 안에 global-layout.tsx 파일을 생성해서 글로벌 레이아웃을 설정합니다.import { ReactNode } from 'react';export default function GlobalLayout({ children }: { children: ReactNode }) { return ( ..
네비게이팅1. Link 태그 이용하기next 에서는 기존의 a 태그를 이용한 페이지 이동보다는 더 빠르게 이동하기 위해서 next에서 자체적으로 제공하는 Link 컴포넌트를 사용해야 합니다. Link 태그의 href 속성으로 페이지 경로를 설정할 수 있습니다. 2. Programmatic Navigation(프로그래매틱한 페이지 이동) 사용자가 링크를 직접 클릭하는 방식이 아닌, 특정 버튼이 클릭되거나 조건이 달성하거나 할 때 특정 함수 내에서 페이지를 이동시키는 방법으로 사용자가 클릭하지 않고도 조건이 충족되면 자동으로 페이지가 이동하게 할 수 있습니다. useRouter 의 method 사용push: 해당 경로 페이지로 이동replace: 뒤로가기 방지 및 페이지 이동back: 뒤로가기 실행프리 페칭..
Page Router란?React-Router와 같이 페이지 기반의 Router 기능을 제공하는 방식. 페이지 라우터는 그 이름에 걸맞게 pages 폴더의 구조를 기반으로 페이지를 라우팅 합니다. 파일 이름 뿐만 아니라 폴더의 이름 기준으로도 페이지 라우팅을 설정할 수 있습니다. 그리고 마지막으로 페이지 라우터에서는 동적 경로를 갖는 페이지 라우팅도 설정이 가능합니다 그래서 동적 경로에 대응하는 페이지를 만들고 싶을 경우 폴더 아래 파일 명에 대괄호를 이용해서 예 : [id].js 파일명을 작성해 줍니다. 그러면 동적 경로에 대응하는 페이지를 만들 수 있게 됩니다. Page Router 설정하기 앞서 간단하게 설명한 것처럼 src > pages 폴더 아래 라우팅할 폴더명 ex) book, search ..
사전 렌더링(Pre Rendering)이란? 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식으로 Client Side Rendering(CSR)의 단점을 효율적으로 해결하는 기술입니다. 그러면 React 처럼 CSR 를 사용하는 라이브러리의 어떤 단점 때문에 Next 프레임워크에서는 Server Side Rendering(SSR) 방식으로 렌더링하는지 알아보겠습니다.React의 렌더링(CSR) 과정먼저 Client Side Rendering 방식은 React.js 앱의 기본적인 렌더링 방식으로 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식을 말합니다. CSR 렌더링 과정을 살펴보면 초기에는 위에 그림 처럼 유저가 접속요청을 서버에 보내면 먼저 index.html를 빈껍..
