전체 글

NextJS 빌드 에러NextJS에 Mysql를 사용하여, API를 통하지 않고 DB에서 직접 데이터를 가져오는 방식으로 서버 컴포넌트를 만들고 있었다. 'npm run dev'에서는 문제가 없이 잘 동작하였다.하지만, 'npm run build'를 하니 'Module not found: Can't resolve 'net', Module not found: Can't resolve tls' 에러가 나타났다. 아래는 에러 내용이다. > next build ▲ Next.js 15.2.4 - Environments: .env.local Creating an optimized production build ...Failed to compile. ./node_modules/mysql2/lib/aut..

SSR이란 무엇인가요?SSR(Server Side Rendering)은 웹 애플리케이션의 초기 HTML을 서버에서 렌더링하여 클라이언트에 전달하는 방식입니다. 이를 통해 사용자는 초기 페이지 로딩 시 빠르게 콘텐츠를 확인할 수 있으며, 검색 엔진 최적화(SEO)에도 유리합니다. SSR의 동작 원리클라이언트 요청: 사용자가 웹 페이지를 요청합니다.서버 렌더링: 서버는 React와 같은 프레임워크를 사용하여 HTML을 생성합니다.HTML 전달: 생성된 HTML과 JavaScript 번들을 클라이언트에 전송합니다.Hydration: 클라이언트는 전달받은 HTML을 기반으로 React 컴포넌트를 활성화하여 동적 기능을 추가합니다.이 과정에서 서버와 클라이언트 간의 렌더링 결과가 일치하지 않으면 Hydration..

이전 단계에서는 **Next.js 서버 컴포넌트(Server Components)**를 통해 데이터베이스에 직접 접근함으로써 API 호출 과정 없이 빠른 데이터 로딩을 구현했습니다.이번에는 데이터가 지연될 때 사용자 경험(UX)을 어떻게 개선할 수 있는지 살펴봅니다.비동기 환경 구성: async/await 도입 및 지연 시뮬레이션better-sqlite3는 원래 동기적(synchronous) DB 라이브러리입니다. 하지만 로딩 UI 설명을 위해, 아래처럼 인위적으로 2초의 지연 시간을 추가하여 비동기 상황을 시뮬레이션합니다.lib/news.jsimport sql from 'better-sqlite3';const db = sql('data.db');// 동기 DB 접근이지만, UX 설명을 위해 비동기처럼 ..

Next.js 13 이상에서는 React 서버 컴포넌트(RSC) 덕분에, 별도의 API 서버 없이 서버에서 직접 데이터베이스에 접근할 수 있습니다.이 글에서는 SQLite와 MySQL을 예시로, 안전하게 서버 컴포넌트에서 DB를 다루는 방법과 장점을 그림과 함께 정리했습니다. 왜 별도 API 서버를 제거해야 할까?서버를 두 개 운영하는 경우, 특별한 이유(예: 마이크로서비스, 레거시 API 통합)가 없다면 불필요한 HTTP 왕복이 발생하여 성능이 떨어집니다.장점설명HTTP 왕복 제거서버 → 서버 → DB 요청 없이, 서버 컴포넌트에서 바로 데이터 조회코드 단순화데이터 로직이 한 프로젝트 안에서 관리되어 배포와 유지보수가 쉬움단, 외부 API 호출이나 마이크로서비스 구조에서는 여전히 별도의 API 서버가 ..

이전 포스트에서 useEffect를 사용한 클라이언트 측 데이터 페칭 방식을 살펴보았습니다. 이 방식은 React에서 일반적이지만, Next.js의 진정한 장점을 활용하는 최적의 방법은 아닙니다.Next.js에서는 모든 페이지 컴포넌트가 기본적으로 React 서버 컴포넌트(RSC)로 작동하며, 이를 활용하여 데이터를 서버에서 직접 가져올 수 있습니다. 이 방법을 통해 코드가 훨씬 간결해지고, 중요한 이점을 얻을 수 있습니다. 1. 서버 컴포넌트 데이터 페칭 코드 예시와 변화서버 컴포넌트 방식을 사용하면, 클라이언트 컴포넌트에서 필수였던 useState와 useEffect를 모두 제거하고 코드를 극적으로 간결하게 만들 수 있습니다. a. 코드 구조: async 키워드와 직접 fetchNewsPage 컴포..