nextjs28 [Nextjs 15] Uncaught Error: Switched to client rendering because the server rendering errored 에러 에러 발생nextjs 에서 비동기 요청 과정 중 자연스러운 ui 흐름을 구성하기 위해 useSuspenseQuery + Suspense + react-error-boundary 를 활용하는 중 "Uncaught Error: Switched to client rendering because the server rendering errored" 에러 발생"Uncaught Error: Switched to client rendering because the server rendering errored" 설명이 에러는 Next.js에서 발생하며, 서버 사이드 렌더링(SSR) 중에 오류가 발생하여 **클라이언트 사이드 렌더링(CSR) 으로 자동 전환**되었음을 의미합니다.Next.js App Router 환경에.. 2025. 2. 7. [Nextjs 15] Route handler cors 설정 설명route handler 를 통한 응답 헤더 cors 설정 방법 공식문서에서는 middleware.ts 및 next.conifg.ts 에서 설정하는 것을 추천cors 헤더 설명Access-Control-Allow-Origin요청을 허용할 출처(origin)를 지정* 는 모든 출처를 허용하지만, 인증된 요청(예: 쿠키 포함 요청)에는 사용 불가합니다.Access-Control-Allow-Methods서버가 허용하는 HTTP 메서드(GET, POST, PUT 등)를 지정기본적으로 서버는 GET, HEAD, POST만 허용Access-Control-Allow-Headers클라이언트가 요청할 때 사용할 수 있는 요청 헤더를 지정Access-Control-Allow-Credentials인증 정보를 포함한 요청.. 2025. 2. 7. Next.js 환경에서 express, MSW 를 활용한 mock 서버 설명MSW(Mock Service Worker) 는 API 요청을 가로채서 원하는 응답을 반환할 수 있도록 돕는 API Mocking 라이브러리로써 주로 테스트 환경이나 로컬 개발 환경에서 사용합니다.장점- 프론트엔드 중심 개발 : 백엔드가 준비되지 않은 상태에서도 프론트엔드 개발을 진행할 수 있습니다.- 테스트 안정성 : 네트워크 상태나 외부 API의 영향을 받지 않고 테스트를 수행할 수 있습니다. - 유연성 : 브라우저와 Node.js 환경 모두에서 동작합니다.MSW 의 컨셉과 개념API 요청과 응답의 흐름을 가상으로 재현하여, 실제 API가 없이 안정적이고 일관된 개발 및 테스트 환경을 제공하기 다음과 같은 방식과 개념을 사용하고 있습니다.1. 요청 중심(Request-centric)MSW는 클라이.. 2025. 1. 5. nextjs middleware.js | ts 설명middleware.ts는 Next.js에서 애플리케이션의 특정 경로 요청에 대해 공통적으로 실행할 작업즉 middleware 를 정의하여 요청(Request)이 처리되기 전에 실행됩니다. 직접적으로 response 및 request / response header 헤더를 수정하거나 rewriting, redirecting 등을 처리 할 수 있습니다. 프로젝트 루트 즉 쉽게 pages나 app 과 같은 레벨에서 작성해서 사용합니다.주요 예시 1. 인증 및 권한 부여 (Authentication and Authorization)특정 페이지나 API 경로에 대한 액세스 권한을 부여하기 전에 사용자 신원을 확인하거나 세션 쿠키를 확인 할 수 있습니다.2. 서버 측 redirects (Server-Side .. 2024. 11. 26. [next 14 공식문서 부시기] 3.3 데이터 가져오기 패턴 서버에서 데이터 가져오기Server Components 를 사용하여 서버에서 데이터를 가져오는 것을 추천하며 다음과 같은 장점을 가지고 있습니다.백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스할 수 있습니다.액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 유지가능동일한 환경에서 data fetch 및 render 과정이 통합 되므로 클라이언트와 서버 간의 불필요한 통신은 줄고 물론 브라우저의 메인스레드 작업도 감소합니다.한 요청에 대한 다수클라이언트에서 여러 개별 요청을 수행하는 대신 단일 왕복으로 여러 데이터 가져오기를 수행합니다.Fetching data where it's needed 트리의 여러 components 에서 동일한 .. 2024. 5. 12. [next 14 공식문서 부시기] 4.2 Client Components Client Components Client Components를 사용하면 요청 시 클라이언트에 렌더링할 수 있는 상호작용이 가능한 UI를 작성할 수 있습니다. Next.js에서 클라이언트 렌더링은 선택사항입니다. 즉, React가 클라이언트에서 렌더링해야 하는 Components 를 명시적으로 결정("use Client" 지시문 사용)해야 합니다. 장점 Client Components는 상태(state), 효과(effect) 및 이벤트 리스너(event listeners)를 사용할 수 있습니다. 즉, 사용자에게 즉각적인 피드백을 제공하고 상호작용을통해 UI를 업데이트할 수 있습니다. 사용 Client Components 를 사용하려면 파일 상단, import 문 위에 React "use client" .. 2024. 2. 29. [next 14 공식문서 부시기] 4.1 Server Components Server Components React Server Components 를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI를 작성할 수 있습니다. Next.js에서는 streaming 과 partial rendering을 활성화하기 위해 렌더링 작업이 경로 세그먼트별로 추가로 분할됩니다. 기본적으로 Next.js는 Server Components를 사용합니다. 필요할 때 Client Components 사용을 선택할 수 있습니다. 서버 렌더링의 이점 Data Fetching: Server Components 를 사용하면 서버 데이터 소스에 더 가까운 서버에서 데이터 요청을 수행할 수 있습니다 . 이를 통해 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 수행해야 하는 요청.. 2024. 2. 24. [next 14 공식문서 부시기] 3.2 Server Actions 활용 Server Actions 과 데이터 변경 Server Actions 은 서버에서 실행되는 비동기 함수입니다. Server componnents 나 Client Components 에서 form 제출 및 데이터 변경을 처리하는 데 사용할 수 있습니다. React use server 지시어를 비동기 함수 상단에 지시문을 배치하여 함수를 Server Actions 으로 표시하거나 별도의 파일 상단에 배치하여 해당 파일의 모든 export 를 Server Actions 으로 사용할 수 있다. Server Actions은 Next.js caching 과 revalidation 아키텍처와 통합됩니다. Server Actions이 호출될 때 Next.js는 single server roundtrip으로 업데이트된 .. 2024. 2. 16. [next 14 공식문서 부시기] 3.1 fetch 를 활용한 데이터 요청과 캐싱 및 재검증 과정 1. fetch 를 사용하여 서버에서 데이터 가져오기 Next.js 는 기본 fetch 웹 API를 확장하여 서버의 각 요청에 대한 캐싱(cashing) 및 재검증(revalidating) 동작을 구성할 수 있도록 합니다. 또한 Server Components, Route Handlers, Server Actions 등 에서 async/await 와 함께 fetch 를 사용할 수 있습니다. 1.1 캐싱(cashing) 기본적으로 Next.js는 fetch 의 반환 값을 서버의 데이터 캐시에 자동으로 캐시합니다. 이는 빌드 시 또는 요청 시 데이터를 가져오고, 캐시하고, 각 데이터 요청에서 재사용할 수 있음을 의미합니다. 1.2 재검증(revalidating) 데이터 캐시를 제거하고 최신 데이터를 다시 가.. 2024. 2. 8. [next 14 공식문서 부시기] 2.9 Intercepting Routes(경로 가로채기) Intercepting Routes 경로를 가로채면 현재 레이아웃 내 애플리케이션의 다른 부분에서 경로를 로드할 수 있습니다. 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용할 수 있습니다. 예를 들어, feed 에서 photo 를 클릭하면 feed 에 오버레이되어 사진을 모달로 표시할 수 있습니다. 이 상황에서 Next.js 는 /photo/123 경로를 가로채서 URL 을 마스크하고 /feed 위에 오버레이합니다. 당연하게도 URL 을 클릭하거나 페이지를 새로 고쳐 photo 로 직접 이동하면 모달 대신 전체 사진 페이지가 렌더링됩니다. 기본 모양 및 규칙 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있습니다. (.)동일한 수준 의 세그먼트 .. 2024. 2. 7. [next 14 공식문서 부시기] 2.8 Parallel Routes(병렬 경로) Parallel Routes (병렬 경로) 병렬 경로를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 이는 대시보드 및 소셜 사이트의 피드와 같이 앱의 매우 동적인 섹션에 유용합니다. Slots 병렬 경로는 @folder 와 같은 형식으로 정의되는 slots 을 통해 생성됩니다. 슬롯은 공유 상위 레이아웃에 props 으로 전달됩니다. 아래의 예에서 app/layout.js 의 component 는 @analytics 및 @team 슬롯 props 을 받아 이를 children props 과 함께 병렬로 렌더링할 수 있습니다. ※ 그러나 슬롯은 경로 세그먼트가 아니며 URL 구조에 영향을 주지 않습니다. 예를 들어 /dashboard/@analytics.. 2024. 2. 5. [next 14 공식문서 부시기] 2.7 프로젝트 구조 (Route Groups, Private Folders) 프로젝트 구조 라우팅 폴더 및 파일 규칙 외에도 Next.js는 프로젝트 파일을 구성하고 배치하는 방법에 대한 다양한 기능과 전략이 존재합니다. Safe colocation by default Router 구조가 폴더를 통해 정의되더라도 page.js 또는 Route.js 파일이 경로 세그먼트에 추가될 때까지 경로에 공개적으로 액세스할 수 없습니다. 또한 공개적으로 액세스 가능하도록 설정된 경우에도 page.js 또는 Route.js 에서 반환된 콘텐츠만 클라이언트로 전송됩니다. ※ 즉 프로젝트 파일이 앱 디렉터리의 경로 세그먼트 내에 실수로 라우팅되지 않고 안전하게 같은 위치에 배치될 수 있음을 의미합니다. Route Groups Route Groups 은 폴더를 괄호로 묶어 생성할 수 있습니다.폴더가.. 2024. 1. 19. 이전 1 2 3 다음
