#prefetch

질문 1
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

7달 전 · 상현 님의 새로운 답변

invalidateQueries가 실행되지 않습니다.

mutate 함수 내부에서 onSuccess:()=>{ queryClient.invalidateQueries({ queryKey: ["USERINFO"] }) navigate("/") } 를 실행하는데 mutate함수는 잘 실행되고 이후에 경로 이동도 잘되는데 useQuery훅 네트워크 요청 자체가 가질 않습니다. refetchType, refetchOnMount, enabled, refetchQueries, prefetchQueries등등 다 시도해 봤는데 안됩니다..! 거의 100번 정도 테스트해봤을때 2번정도? 우연치않게 됐던거같은데 이때 빼고는 전부 안됐습니다ㅜㅜ 어떻게 해야할까요??

개발자

#invalidatequeries

답변 3

댓글 1

조회 93

8달 전 · 허니 님의 새로운 답변

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

개발자

#nextjs

#nextjs13

#nextjs14

#reactquery

#서버컴포넌트

답변 1

댓글 0

보충이 필요해요 1

조회 91

일 년 전 · 익명 님의 새로운 댓글

Next.Js의 next/link, middleware 질문합니다!

안녕하세요. 회사에서 Next.js, Vercel 환경에서 개발하는 신입 프론트엔드 개발자입니다. Next.js 기술의 next/link와 middleware 기술에 대해서 궁금증이 생겨서 질문합니다!! next/link는 prefetch기능이 큰 장점으로 알고있어서 Link태그에 경로를 설정해서 미리 데이터를 받아오려고 테스트해보는데 prefetch={true} 속성값을 줘도 개발자도구에서 봤을때 미리 데이터를 받아오지 않는거같습니다 ㅠㅠ 원래 개발자 도구에는 확인이 불가능한건가요?? 그리고 next.js의 middleware는 공식문서에 구글링을 통해서 이론적인 부분은 알고있는데 어떤 경우에 사용해야할지 감이 안잡히네요. 어느 페이지에 middleware를 적용해보는게 좋을까요? 이해하기 쉽게 알려주시면 감사하겠습니다 🙏

개발자

#next.js

#react

답변 1

댓글 1

추천해요 2

조회 282

일 년 전 · 허니 님의 새로운 답변

Next.JS generateMetadata에서 fetch를 한번 진행하면 prefetch를 하지 않아도 되는건가요?

Next.JS generateMetadata에서 fetch를 한번 진행하면 prefetch를 하지 않아도 되는건지 궁금합니다. 현재는 사진과 같은 코드처럼 사용하고 있는데, 문득 generateMetadata가 실행될 때 한번 fetching이 이루어지기 때문에 컴포넌트단에서 prefetch를 시켜주지 않아도 된다고 생각했는데, 맞을까요?

개발자

#next

#react

#react-query

답변 1

댓글 0

조회 137

일 년 전 · 허니 님의 답변 업데이트

Next와 React-query의 prefetch에 대해

안녕하세요 ! Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다. Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다. 1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다. 2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다. 현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다. 이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다. 제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ? 또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ?

개발자

#next.js

#react-query

#ssr

답변 1

댓글 0

추천해요 2

조회 384

일 년 전 · 포크코딩 님의 새로운 답변

Next app 라우터와 react query애서 ssr이 적용되는 원리에 대해서 궁금합니다

react query와 ssr을 같이 사용하는 경우 queryClient에서 prefetch 한 다음 해당 queryClient를 dehydate한 dehydate(queryClient)를 HydrationBoundary에 전달해 주면 HydrationBoundary 하위 컴포넌트에서 prefetch 된 캐시 데이터를 queryKey를 통해 접근 할 수 있고 이를 통해 ssr 이 구현된다는 것 까진 이해 하였습니다. 하지만 이 과정에서 1. useQuery로 가져온 캐시 데이터를 사용하는 부분은 컴포넌트가 "use client"인데도 html 문서에 데이터가 입력돼서 넘어옵니다. 그렇다면 next가 ssr을 구현하는 서버와 reactQuery의 캐시 데이터가 존재하는 서버가 같은 위치에 있어서 html 문서에 캐시 데이터가 들어갈 수 있는것인가? 2. 문서 생성과정은 캐시된 데이터를 가져와서 생성하는 것으로 추측됩니다. dehydrate는 문서 안에 있는 데이터를 reactQuery의 데이터로 만드는 과정이라 들었는데 서순이 이상한거 아닌가? 라는 의문이 들어서 HydrationBoundary 와 dehydate를 통해 ssr이 적용되는 과정에 대한 원리를 정확히 알고 싶습니다.

개발자

#프론트엔드

#next.js

#app-route

#reactquery

#ssr

답변 1

댓글 0

조회 404

2년 전 · 문정동개발자 님의 답변 업데이트

nextjs에서 서버 컴포넌트 클라이언트 컴포넌트 분리하는 방법

안녕하세요. 현재 nextjs를 기반으로 커뮤니티 사이트를 만들고 있습니다. SEO를 가장 중요한 요소로 고려하여 개발하려고 하는데 홈, 게시글 리스트, 게시글 상세 페이지, 마이 페이지, 설정 페이지 등 여러 페이지 중에 어떤 것까지 SEO를 신경써야 할까요? SEO가 중요한 페이지는 반드시 서버 컴포넌트 위주로 개발하는 게 유리하다면 관련 기술의 키워드가 있을까요? 요즘 prefetching이나 hydrate 관련된 내용을 찾아보고 있는데 방향성이 맞는지 궁금합니다..!

개발자

#react

#next.js

답변 1

댓글 0

조회 343

2년 전 · LHS 님의 새로운 댓글

Next.js 와 React Query SSR 네트워크 요청관련

현재 next.js 13버전과 react query를 같이 사용하고있습니다. https://tanstack.com/query/v4/docs/react/guides/ssr 공식문서에 나와있는 방법중 Hydration 방식을 사용하고있는데 서버 컴포넌트에서 prefetchQuery 를 하고 클라이언트 컴포넌트에서 useQuery 를 같은 키값으로 한다면 클라이언트 즉, 브라우저 네트워크 탭을 확인했을때 해당 요청이 네트워크 탭에서는 확인이 안되어야 정상일까요?

개발자

#next.js-13

답변 1

댓글 1

조회 299

2년 전 · 김형준 님의 새로운 답변

Next 의 Link 컴포넌트 prefetch 기능에 대하여

안녕하세요 프론트엔드 개발자 취준준비하고있는 취준생입니다. 현재 개인프로젝트를 Next 13.4 app dir 으로 만들고있는데요. 아무래도 혼자 하다보니 원하는 조건에맞는 api를 구현하기 힘들어 OPEN API 를 사용하고있습니다. 저는 기본적으로 다른페이지 이동시엔 Link 태그를 사용하는데요 Next 의 Link 태그는 기본적으로 prefetch 기능이 있어 방문가능성이 있는 컴포넌트에 마우스를 호버만해도 fetch 요청을 보내더라구요. 이것때문에 Open API 에서 RateLimit 이 걸려서 데이터를 제대로 받아오질 못하는 상황이 종종 발생합니다.. (1초당 5회 요청하면 Ratelimit 발생 화면에 대충 마우스 휘저으면 Ratelimit...) UI는 사진을 올릴수가 없게되어있어서 제 프로젝트 링크 첨부합니다.. (문제시 삭제) https://nft-market-cyan-xi.vercel.app/ 일단 데이터를 제대로 받아오기위해 prefetch 기능은 꺼두었는데요.. 페이지 이동간 속도가 현저히 차이가 나더라구요 이 문제를 해결하려면 어떻게 해야할까요.? Ratelimit이 없는 API를 사용해야할까요? 현업에선 어떻게 다루시나요? prefetch 를 끈다면 SSR의 장점이 많이 없어지는것같아서 고민입니다

개발자

#next.js

#frontend

#front

#react

답변 3

댓글 0

조회 401

2년 전 · 넥스트스탭 님의 답변 업데이트

Next.js 링크 hover 시점에 prefetch 기능 비활성화하기

Next.js 링크 태그의 prefetch 기능을 비활성화 하려고 합니다. 그런데 <Link href={'...'} prefetch={false} /> 를 적용해도 hover 시점에는 계속 prefetch 를 하네요? 공식 문서를 찾아보니 hover 시점에는 prefetch 를 한다고 적혀있는데 이걸 제한하는 방법은 아예 없는 건가요? ㅠ

개발자

#next.js

#link

#prefetch

답변 3

댓글 1

조회 671

2년 전 · 커리어리 AI 봇 님의 새로운 답변

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

개발자

#react

#next.js

#ssr

#react-query

답변 2

댓글 3

추천해요 4

조회 3,147