#suspense

Suspense, useSuspenseQuery를 이용해서 skeleton ui를 구현하는데 초기 렌더링시 화면이 덜그럭거리는 문제가 있습니다.

200ms 동안은 이전 UI를 보여주고, 그 다음부터는 skeleton ui를 보여주고 싶습니다. 하지만, 현재상황은 이렇습니다. useSuspenseQuery를 이용했을때, 처음 200ms동안 데이터가 없어서 높이가 0이 되었다가 다시 높아지면서 화면이 덜그럭거리는 문제가 있습니다. 그래서 useTransition을 이용해서 이전 UI상태를 유지하도록 했지만 지연시간이 길어졌을때는 skeleton ui가 보이질 않습니다. 제가 궁금한건 다음과 같습니다. 1. 보통 useSuspensequery를 사용해 skeleton ui를 보여줄때 초기 렌더링시 이전 데이터가 보이지 않아서 화면이 깜빡이는 문제를 어떻게 해결하나요? 2. useTransition과 skeleton ui는 같이 사용할 수 없는 건가요? 대략적인 코드는 다음과 같습니다. 각각 최상위 부모인 Search 페이지, 데이터를 불러오고 카드리스트를 업데이트하는 CardList 컴포넌트, 스켈레톤 UI의 지연을 처리하는 DeferredComponent 입니다.

리액트 lazy와 Suspense질문있습니다.

Spa를 만들면서 lazy와 suspense로 로딩처리하는것을 너무 남발하는거같단 생각이 들었습니다. 하나의 잘못된 예시로는.. 모든 라우트경로를 lazy로 처리해주고 전체 라우트를 suspense로 감싸고 로딩처리를 해주는경우인거같은데요.. 아래 코드는 실제로 제가 적용한 코드입니다. 이렇게 하니까 새로고침하면 로딩컴포넌트가 잠깐 반짝하고 사라지는데.. 아무래도 반짝하고 사라지면 사용자 경험측면에서 문제가 될거같단 생각이 들었습니다. 최초 페이지 이동시에도 순식간에 로딩이 떳다 사라지긴하지만 이건 그러려니 하고있습니다. 혹시 다른분들은 어떤식으로 사용중이신가요? useTransition라는 선택지가 있기는하지만 이거는 지금 제 상황과는 맞지않다는 생각입니다. (페이지네이션같은곳에 적용하면 좋을거같단 생각중..) lazy처리해주기에는 라우터 페이지 수가 적으니 걷어내는것도 정답이긴 하겠지만 lazy를 한번 꼭 적용시키고싶습니다. 아니면 메인페이지인 Homepage만 lazy를 걷어낼까요?

프론트 경력 기술 면접 궁금한 것이 있습니다.

안녕하세요 주니어 프론트엔드 개발자 입니다. 1. 기술면접에서 어떤 프로젝트의 기술적인 부분을 설명해달라고 했을 때 아래와 같이 기본적인 내용도 말할만 한가요? - 리액트의 Suspense 와 Error Boundary 를 사용하여 선언적으로 Data Fetching 을 처리함 Error fallback 에는 refetch 가능한 로직도 포함하여 재시도 할 수 있게끔 함. 2. 제가 도입하지 않은 라이브러리에 대해 도입 이유를 물어본다면 제가 생각한 도입 이유를 말해도 될까요? - 제가 도입했다고 말하지도 않았는데 이런 질문을 종종 받습니다. 기록이 따로 없었기 때문에 회사에서 그 라이브러리를 도입한 이유는 알 수는 없습니다. - 이야기할 때 진짜 이유는 모르지만 저라면 ~해서 도입했을 것 같습니다. 처럼 이야기 하는 편입니다.

useSuspenseQuery의 SSR 요청

안녕하세요, Next.js (v13-14), react-query (v5), page router 환경일 때, useSuspenseQuery와 Suspense를 사용했는데 찾아보니 useSuspenseQuery는 컴포넌트 렌더링 시점에 데이터를 로딩하도록 설계가 되어 있어서 Next.js에서 getStaticProps or getServerSideProps 함수를 사용하지 않아도 서버에서 api 요청이 보내지는게 맞을까요? 제가 테스트해보니 위의 가정 했던 것 처럼 동작하는것을 확인을 했지만 문서에서는 그런 내용을 찾을 수가 없어서 질문을 올려봅니다. 감사합니다!

Next.js의 SSG와 react-query의 useSuspenseQuery

Next.js v14의 페이지 라우터 및 react-query v5의 useSuspenseQuery를 사용하여 Suspense를 사용할 때 페이지 컴포넌트에서 getStaticProps를 사용하지 않아도 SSG 빌드 타임에서 API request 하는 현상이 발생해서 찾아보니 useSuspenseQuery가 컴포넌트 렌더링 시점에 데이터 로딩하도록 설계가 되어 있기 때문에 빌드 타임에서 HTML을 만들 때 결국 API request 하게 되는 것이라고 이해했었는데 제가 이해한 부분이 맞을까요? react-query(tanstack-query)나 next.js의 공식문서에는 그러한 내용을 찾기가 어려워서 정확한 정보인지 알고 싶습니다!

Next14 SSR 과정에서 Authorization에 쿠키를 사용해 토큰값을 전달하면 에러가 발생합니다..

안녕하세요. 혼자서 해결해 보려고 했지만, 오랜 시간 해결하지 못해 지푸라기라도 잡는 심정으로 질문 올려봅니다.. 기존에 localstorage를 사용해 fetch로 데이터를 요청했으나 SSR 과정에서 window 사용이 불가능하기 때문에 쿠키를 사용을 계획했습니다. 로그인 -> 쿠키에 토큰값 저장 -> 데이터 요청 시 쿠키에서 토큰 값을 꺼내고 헤더 Authorization에 담아 SSR에서도 사용하려고 했습니다. next에 내장되어있는 'next/headers'가 아닌 'cookies-next'를 사용하고 있습니다. <문제 상황> 처음에는 토큰 유효 기간이 지났다(토큰 값이 들어오지 않았다)는 에러가 발생하고 곧이어 데이터를 정상적으로 받아옵니다 (제 추측으로는 SSR 과정에서 토큰 값을 인식하지 못하고 에러가 발생하고 클라이언트 단에서는 쿠키 값을 정상적으로 반영해 데이터 페칭이 진행된 것 같습니다.) <질문> 1. Suspense를 적용하지 않을 경우 에러 없이 동작하지만 next streaming이 적용되지 않습니다.. 그리고 getCookie를 통해 가져온 값이 SSR 시 적용되지 않는 이유가 궁금합니다! 2. 현재 쿠키를 사용해 SSR 시 토큰 값을 전달하려는 방법이 최선의 방법이 맞는지 궁금합니다.

자식 컴포넌트 suspense 적용 질문 드립니다.

안녕하세요, 다름이 아니라 suspense컴포넌트를 사용하려는 중, 작은 문제가 있어 질문글을 올리게 되었습니다. 페이지 헤더가 있고 헤더의 부모래퍼 영역에서 모든 api호출이 일어나고 props drilling으로 자식 컴포넌트에 데이터를 적용합니다. 하지만 부모 영역은 헤더 전체이므로 스켈레톤 처리가 어렵습니다. 단, 자식 영역은 데이터가 로드 될 때 까지 스켈레톤 처리를 하고싶은데, 이 때 suspense를 어떻게 하면 적용할 수 있는지 궁금합니다. 현재는 react-query를 사용하여 isLoading 변수를 받아 해당 변수에 따라 명령형으로 스켈레톤 처리를 진행하고있습니다.

useSuspenseQuery 와 ErrorBoundary 궁금증입니다!

ReactQuery v5 와 ErrorBoundary를 공부하고 있습니다. 학습 과정에서 궁금한 점이 있는데용 Query 데이터를 가져올 때, 네트워크 오류 발생 시 오류 오버레이 UI가 렌더링되면서 uncaught errors 라고 메세지가 나오네요. 그러나 ErrorBoundary의 fallback UI는 렌더링이 제대로 됩니다. uncaught errors라면 ErrorBoundary에서 에러를 캐치하지 못한 걸까요? 그러기엔 fallback UI가 렌더링되니 오류를 잡은건가 헷갈립니다. 혹은 개발 환경에서는 오류 오버레이 UI가 렌더링되는 것이 정상적인건가요? 열심히 찾아봤는데 잘 나오지 않는 것같아 질문드립니다...!

Next.js의 Suspense VS dynamic

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic Lazy Loading을 사용하기 위해서 Next.js에서는 2가지의 방법을 제공하고있습니다. 1. dynamic 2. React.lazy + Suspense 또한, Next 의 Streaming 관련글을 읽다 보니 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example 예제에서는 Suspense를 사용한 예제를 보여주는데 위의 예제에서는 dynamic을 사용하지 않고 Suspense를 사용한 이유가 궁금합니다. 처음 링크된 글을 읽었을때는 dynamic 함수가 React.lazy + suspense를 구현함 과 동시에 여러 옵션들을 제공하고 있어서 dynamic 함수가 더 좋다(?) 라고 생각을 하게 되었는데, dynamic과 suspense의 정확한 차이점이 궁금합니다.

react.lazy 사용해서 코드 스플리팅할 대상 정하는 기준이 있나요?

React.lazy 와 Suspense로 코드 스플릿팅을 하려고 하는데 쪼개는 대상 정하는 기준이 뭘까여 ㅠㅠ