풀 라우트 캐시는 Next.js 서버에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능이다.작동 방식빌드 타임에 페이지를 미리 렌더링하는 과정에서 해당 페이지에 필요한 데이터들은 Request Memoizations이나 Data Cache 등의 캐싱 기능을 거친다.렌더링이 완료된 결과를 'Full Route Cache'라는 이름으로 서버 측에 저장한다.빌드 후 Next.js 서버가 실제로 가동되었을 때, 해당 페이지로 접속 요청이 들어오면 새롭게 렌더링할 필요없이 캐시된 페이지를 그대로 브라우저에 전송한다. 페이지 분류Next.js에서 페이지는 정적 페이지와 동적 페이지로 분류되는데, Full Route Cache는 정적 페이지에만 적용된다.동적 페이지로 설정되는 기준동적 페이지는 특정 페이지가..

Data Cache기본 사용법fetch 함수의 두 번째 인수로 객체를 전달하여 캐시 설정을 저장할 수 있다.기본적으로는 캐시되지 않는 요청으로 동작한다. (auto no-cache)const response = await fetch('url', { 캐싱 설정 });주의 사항이 캐싱 옵션들은 Next.js의 fetch 구현에서만 사용 가능하다.Axios 등 다른 HTTP 요청 라이브러리에서는 이 옵션들을 직접 사용할 수 없다. 캐싱 옵션cache: 'no-store'데이터 페칭의 결과를 저장하지 않는다.const response = await fetch('url', { cache: 'no-store' });실시간 데이터가 필요한 경우 (주식 시제, 실시간 채팅)cache: 'force-cache'요청된 결..

Pages Router페이지 라우터에서는 사전 렌더링 과정 중 Next.js 서버 사이드에서 다른 백엔드 서버나 데이터베이스로부터 데이터를 페칭한다.작동 원리페이지 역할을 하는 파일 안에 서버 측에서만 실행되는 특수 함수를 사용하여 데이터를 직접 페칭하며, 페칭한 데이터는 페이지 컴포넌트에 props로 전달한다.export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data }, }}export default function Page({ data }) { return {data}..

Next.js의 App Router에서는 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다.이 구분은 상호작용 유무와 렌더링 위치에 따라 이루어진다.Client Component클라이언트 컴포넌트는 브라우저에서 실행되며, 사용자와의 상호작용을 처리할 수 있다.'use client' // 파일 최상단에 지시어 선언import { useState } from 'react'export default function Counter() { const [count, setCount] = useState(0) return setCount(count + 1)}>{count}}사전 렌더링 시 한 번, 하이드레이션 시 한 번, 총 두 번 실행useState, useEffect 등의 React 훅 사용 가능브라..

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 ..

이 글에서는 SPA에서 페이지 새로고침 없이 URL을 변경하고 검색 기능을 구현하는 방법을 알아본다.History API를 활용한 클라이언트 사이드 라우팅은 프레임워크 없이도 효과적인 SPA를 구현할 수 있는 핵심 기술이다.클라이언트 사이드 라우팅 구현History API 활용history.pushState()를 사용하면 페이지 새로고침 없이 브라우저의 URL을 변경할 수 있다.// App.jshandleClick: async () => { // 브라우저 히스토리에 새 항목 추가 (URL을 홈으로 변경) history.pushState(null, null, "/"); // 포켓몬 목록 데이터 다시 불러오기 const pokemonList = await getPokemonList(); // 앱 전..

바닐라 자바스크립트로 SPA를 구현할 때 컴포넌트 패턴을 활용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있다.이 글에서는 React와 같은 프레임워크 없이 순수 자바스크립트만으로 컴포넌트 기반 아키텍처를 구현하는 방법을 알아본다.바닐라 JS 컴포넌트 설계 패턴애플리케이션 진입점 설정SPA의 시작점에서 애플리케이션을 초기화한다.import App from './App.js';const $app = document.querySelector('#app');new App($app);App 컴포넌트가 #app DOM 요소에 마운트되어 애플리케이션이 시작된다. $app 요소는 전체 애플리케이션의 최상위 컨테이너 역할을 한다. 부모 컴포넌트 구현부모 컴포넌트는 애플리케이션의 상태를 관리하고 자식 컴포넌트들..

오늘은 Node.js와 Express.js를 활용하여 간단한 서버를 구축하는 방법을 학습했다.Express.js는 Node.js 환경에서 웹 서버를 쉽게 구축할 수 있게 해주는 프레임워크로, 간결한 코드만으로 서버 기능을 구현할 수 있다.Express 서버 기본 설정const express = require("express");const path = require("path");const app = express();const PORT = 3000;app.listen(PORT, () => { console.log("START SERVER");})express와 path 모듈을 불러와 app 인스턴스를 생성하고, 포트 번호를 3000으로 설정하여 서버 리스닝을 시작한다. 정적 파일 제공 설정// 프로젝트..