ssr 4

[SEO] 렌더링 방식과 SEO, Hydration의 관계

🌐 CSR, SSR, SSG, ISR의 렌더링 방식과 SEO, Hydration의 관계SEO 최적화를 고민하다가 CSR/SSR뿐만 아니라 SSG, ISR 그리고 SEO, Hydration에 대한 개념을 정리하고 실제 사용 시 어떤 조합이 적절한지 고민해보게 되었다. ✅ Hydration이란?Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 React가 연결하여 실제로 동작하게 만드는 과정이다. SSR, SSG, ISR 모두 hydration이 필요하다HTML만으로는 상호작용이 불가능하며, React의 이벤트 바인딩이 완료되어야 비로소 인터랙션이 가능해진다Hydration 동안에는 버튼 클릭, 입력 등이 잠시 비활성화될 수 있어 사용자 경험에 영향을 줄 수 있다 예를들어,서버가 만들어준 ..

Frontend/Next.js 2025.04.12

[SSR/CSR] Next.js에서 초기 스타일이 깜빡이는 FOUC 문제 해결하기

👩‍🔧 Next.js에서 초기 스타일이 깜빡이는 FOUC 문제 해결하기2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용) [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)🎨 Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다.ayeongjin.tistory.com2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로..

[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #1 (Fabric.js vs Konva.js)

🎨 Next.js + TypeScript에서 그림판 만들기 (Fabric.js vs Konva.js) 1. 프로젝트 배경Next.js에서 그림판 기능을 구현하려고 처음에는 fabric.js를 사용했다.하지만 몇 가지 문제 때문에 리액트 친화적인 konva.js로 전환했다. ❗️ Fabric.js의 문제점공식 문서에서 undo / redo 기능을 지원하지 않음 → _objects 같은 내부 비공식 API를 써야 해서 위험React에서 상태 관리하기 어려움 → 성능 최적화가 부족TypeScript 지원 부족 → 공식적으로 잘 문서화되지 않음 ✅ Konva.js를 선택한 이유React 친화적 (react-konva 사용)Undo/Redo 상태관리가 쉬움 (State 기반으로 관리)Canvas 기반으로 HTM..

[Next.js/Page Router] 2. SSR (Server Side Rendering)

SSR (Server-Side Rendering) 1. 기존 리액트 앱의 동작 방식불러온 데이터를 보관할 State 생성데이터 페칭 함수 생성컴포넌트 마운트 시점에 fetchData 호출데이터 로딩중일때의 예외처리💡 문제점클라이언트에서 데이터를 요청하고 로딩하는 데 오랜 시간이 걸림초기 접속 시, 화면이 렌더링되기 전에 필요한 데이터를 받아와야 하기 때문에 UX가 저하됨 2. SSR (Server-Side Rendering)이란?서버에서 미리 HTML을 생성하여 클라이언트에 전달하는 방식요청이 들어올 때마다 서버에서 렌더링을 수행하고, 완성된 HTML을 반환함SEO 최적화 및 초기 로딩 속도 개선에 유리함 3. SSR의 동작 방식클라이언트가 페이지를 요청함서버에서 데이터 요청 및 페이지 렌더링을 수행함..

Frontend/Next.js 2025.02.02