개발 노트

하이드레이션이란 서버에서 HTML을 먼저 보내줘 사용자가 화면을 빠르게 볼 수 있게 한 다음, 클라이언트에서 해당 HTML에 JavaScript코드를 결합하여 상호작용이 가능한 동적인 웹페이지로 만드는 과정입니다.하이드레이션의 주요 역할 및 필요성Next.js는 기본적으로 SSR이나 SSG 방식으로 HTML을 미리 생성하여 클라이언트에 전달할 수 있습니다.HTML을 미리 생성과 하이드레이션의 이점초기 로딩 속도 향상 및 SEO 최적화: 서버에서 완성된 HTML을 받기 때문에 사용자는 빈 화면이 아닌 내용이 채워진 페이지를 빠르게 볼 수 있으며, 검색 엔진 최적화에도 유리합니다.React 기능 활성화: 서버에서 내려준 HTML은 단순히 구조만 있는 정적인 상태입니다. 하이드레이션 과정을 통해 클라이언트의 ..

사전 렌더링사전 렌더링이란 Next.js가 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링하는 대신, 서버에서 미리 HTML 파일을 생성하는 기능입니다. 이를 통해 사용자에게 더 빠른 로딩 속도와 검색 엔진 최적화 기능을 제공할 수 있습니다.정적 생성(SSG)정적 생성은 빌드 시점에 HTML 파일을 미리 생성하는 방식입니다. 한 번 빌드된 HTML 파일은 CDN에 배포되어 캐싱되며, 모든 요청에 대해 동일한 페이지를 제공합니다.특징속도가 빠름검색 엔진 최적화에 효과적데이터가 자주 변하지 않는 페이지에 적합(ex: 블로그 게시물, 제품 랜딩 등)서버 사이드 렌더링(SSR)서버 사이드 렌더링은 사용자가 페이지를 요청할 때마다 서버에서 HTML 파일을 동적으로 생성하는 방식입니다. 페이지에 따..

publicpublic에 저장된 파일들은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적됩니다. 즉 접속하는 유저가 원한다면 접근할 수 있습니다. 예를 들어, 브라우저에서 localhost:1234/game-logo.png에 접속하면 해당 이미지를 볼 수가 있습니다.assets파일들이 공개되지 않기 때문에 localhost:1234/src/assets/game-logo.png에 접속할 수 없습니다.결론logo, og-img, favicon같이 빌드 프로세스에 의해 처리되지 않는 이미지는 public에 컴포넌트 내에서 사용되는 이미지는 assets에서 사용하면 좋습니다.참고 페이지https://velog.io/@sooxpak/React-public-vs-assetshttps://yescold.tisto..