#getserversideprops

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;

NextJS에서 Component 호출 할 때 getServerSideProps 호출 방법이 있나요?

JSTL 이나 Thymeleaf 하다가 NextJS 하려니 많이 해메고 있네요. @,@;;; 우선 시나리오는 ProductList.html 페이지에서 서버로부터 상품 목록 주욱 받아 화면 출력 하는 것 까지는 했어요. 이때 서버 목록은 getServerSideProps 함수에서 받아 처리 했구요. 이제 상품 이름 클릭 했을 때 상세 정보를 Layer 화면으로 띄우려는데 그게 잘 안되네요. Thymeleaf에선 해당 페이지만 빌드 돼 html 형태로 받아 올 수 있었는데 nextjs는 어떻게 해야 하는지 모르겠어요. // 상품 상세 내용 export default function ProductModalLayer({ product }:IProduct) { return (<div> {product.name}</div>); } export async function getServerSideProps(context: any) { // 서버 통신으로 product 상세 정보 전달 const data = ... 생략... return { props: { product: data, }, }; } ------ ProductList 부분에서 상품 이름을 클릭 했을 때 const ModalView = dynamic(() => import("../ProductModal.layer")); // 선언 ... // 화면 그리기 <ModalView seq={prod.productSeq}></ModalView> 이런 형식으로 호출 하니까 getServerSideProps를 호출 하지 않네요. 다른 방법으로 fetch를 이용해 호출 해 봤는데 const res = await fetch("/ProductModal.layer?seq=" + seq); const content = await res.text(); 이렇게 하면 getServerSideProps를 호출 하지만 html Tag가 엄청 붙어 나오고 return 의 결과가 아닙니다. getServerSideProps를 고집 하는 이유는 서버 호출 인터페이스는 꼭 서버에서 이뤄지게 하고 싶어서에요. 브라우져 디버거로 노출 안되게 하고 싶어서. 힌트나 방법좀 부탁 드려요~ 다시 JSTL 이나 Thymeleaf로 돌아 갈 수 없어~~~~

next.js getServerSideProps 관련해서 질문드립니다.

1. getServersideProps(serverless function)는 동적인 컨텐츠를 제공해야하기 때문에 정적인 콘텐츠를 전달해주는 cdn를 거칠 수 없다고 알고 있습니다. 그래서 vercel origin 서버까지 통신을 거쳐서 콘텐츠를 전달 받기 때문에 TTFB가 느릴 것 같다고 생각했는데 여기까지 맞는 생각인가요? 2. next.js v13에서 edge(cdn)에서 동적인 콘텐츠를 받아올 수 있게 하기 위해 세그먼트 런타임 옵션(https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#segment-runtime-option)을 통해 nodejs 대신 edge runtime으로 설정해주면 serverless function이 edge function이 되는건가요? 3. 커리어리 홈화면을 보니 getServersideProps를 사용하고 있고 pre-rendering는 간단한 골격만 하고 pre-fetch는 안해주고 있는것 같은데, 새로고침 했을때 TTFB를 300ms 정도로 유지할 수 있는건지가 궁금합니다! 저는 프로젝트 규모가 크지않은데도 불구하고 가끔씩 새로고침을 하면 TTFB가 1초이상 걸릴 때도 있거든요.. 어떻게 적용했는지 알려주신다면 큰 도움이 될 것 같습니다! 🙇🏻‍♂️

Next 13과 react 18 서버 컴포넌트 관련 질문 (질문이 좀 길어요)

안녕하세요, 요즘 next 13과 react 18 서버 컴포넌트에 대해서 본격적으로 파고 있는데 궁금한 점들이 여러가지 떠올라서 글 올립니다. 1. data fetching 방식의 변경 우선 기존에는 동적인 data fetching의 경우, getServersideProps를 통해서 페이지의 root에 전달해주고는 방식이 일반적이었는데 서버에서만 돌아가는 서버 컴포넌트가 나오면서 data fetching을 컴포넌트 단위로 할 수 있게되면, 기존에 사용하던 getServersideProps 같은 유틸 함수들은 사라지는건가요? 기존에는 정적 데이터면 getStaticProps, 동적 데이터면 getServersideProps, 유저 상호작용이 필요한 데이터면 client side useEffect를 많이 사용했는데 next 13부터는 이게 뭔가 뒤섞이는 것 같아서 혼란스럽네요. next 13을 위한 data fetching 패턴이나 방법론이 있나요? 2. 기존에 사용하던 상태 관리 프레임워크의 변화 위와 어느정도 연결되는 이야기입니다. 기존에 react-query를 많이 사용했는데 next 13부터 컴포넌트 레벨로 데이터를 요청할 수 있고 또 next 차원에서 요청 중복 제거를 지원하게되면 react-query 처럼 서버 상태관리와 캐싱을 강점으로 내세우는 프레임워크의 역할을 어떻게 되는건가요? 서버 상태를 컴포넌트 레벨에서 가져올 수 있다고 해도, 여전히 전역 상태 관리가 필요할 것 같은데 recoil, redux, zustand 같은 상태 관리 프레임워크도 계속 쓰게되는 것일까요? 계속 쓰게 된다고 하면 서버 컴포넌트와의 호환성은 어떻게 되는건가요? 만약 전역 상태 관리를 써야하는 컴포넌트라면 서버 컴포넌트가 될 수 없는 것인가요? 3. 서버 구성의 변경 다른 곳은 모르겠지만, 저는 next 백엔드를 단순히 요청을 전달하는 용도로만 쓰고 실제로 중요한 로직은 다른 백엔드 서버에서 처리하는 구조를 가지고 있었습니다. 하지만, next 13을 보니 서버 컴포넌트에서 DB 연결을 직접해서 데이터를 가져오는 예시들도 있더군요. 사이드 프로젝트라면 모르겠지만, 실 서비스에서도 서버 컴포넌트 - DB 직접 연결 이라는 구조가 성립할 수 있는건가요? 기존에 데이터를 취합하고 내려주던 백엔드 서버의 역할이 생략되는거라고 생각해도 되는건가요? 4. 왜 다시 20년 전으로 돌아가는거죠 제가 20년 동안 개발한 것은 아니지만, 예전에는 웹페이지를 서버에서 완전히 로드해서 내려주는 형태를 가지고 있었다고 배웠습니다. 그러다가 개개인의 기기가 스펙이 좋아지면서 서버 부하를 줄이고 클라이언트 쪽에서 역할을 분담하는 방식이 떴다고 들었어요. react도 처음에는 이런 프레임워크로 나왔다고 알고 있습니다. 그러다가 next, remix 같은 프레임워크들이 서버사이드 렌더링을 적극적으로 장려하면서 다시 회귀하고 있다고 들었습니다. 최근에는 react 마저 서버 컴포넌트를 발표했잖아요. 왜 이제와서 다시 서버 쪽에서 페이지를 로드하는 방식을 추진하고 있는건가요? 질문을 적고보니 좀 길어졌는데, 서핑을 좀 해봐도 마땅히 도움이되는 글이 별로 없어서 현직자들은 어떻게 생각하시는지 의견을 얻고자 질문 올립니다!

Next.js(13.4.0) 모든 페이지에서 토큰 유/무 판단하기

현재 signup, signin, home, save, mypage 총 5개의 페이지가 있습니다. home, save, mypage에서 refresh-token의 존재 유/무에 따라서 signin 경로로 redirect 시키려고 합니다. 로그인을 하면 localStorage에 access-token 저장, browser cookie에 refresh-token이 저장됩니다. 로그인 후에 임의로 refresh-token 값을 지웠을 때, signin 경로로 redirect 시켜주기 위해 각 페이지에서 getServerSideProps를 사용하여 refresh-token의 존재 유/무를 판단하여 redirect를 시켜주고 있습니다. 현 상황처럼 각 페이지에서 인증을 처리하는 것이 아닌 모든 페이지에서 공통으로 인증을 처리하는 방법이 있는지 궁금하여 질문드립니다.

Next.js i18n 다국어 시 getServerSideProps 사용 문제

안녕하세요 Next.js를 통해 프로젝트를 진행하고있는데 궁금증이 생겨서 질문남깁니다 ! i18n 라이브러리를 통해 다국어를 진행하고있는데 getStaticProps를 쓰고있습니다.. getStaticProps는 getServerSideProps랑 같이 사용 못하는 것으로 알고있는데 페이지마다 다국어가 들어가는 상황에서 get api 호출을 어떻게 진행해야할까요? (거의 모든 호출이 query나 param이 있는 동적인 데이터입니다…) 1. CSR형태로 페이지내에서 진행 2. 다국어또한 getServerSideProps로 진행 3. getStaticPath로 ISR형태로 revalidate를 짧게 진행해서 getStaticPaths가 없이 fallback “true”, “blocking” 형태로 진행 또 추가로 4. fallback “true”와 “blocking” 때의 각각의 장단점이 궁금합니다….! (똑같아보여서…😭) 질문이 길지만 너무 감사합니다😂

next.js getServerSideProps와 서버 컴포넌트

next.js에서 새롭게 선보인 서버 컴포넌트를 공부하다가 생긴 질문 남겨봅니다! 기존에는 SSR을 구현할때 getServerSideProps를 통해서 페이지에 필요한 정보를 내려주고 있었는데요. 이렇게 getServerSideProps에 구현된 로직을 서버 컴포넌트로 바꿔야하는 것인지 궁금합니다. 서버 컴포넌트도 서버에서만 돌아가는 코드니까 getServerSideProps가 하던 역할을 쪼개서 하는건가 싶어서요. (https://beta.nextjs.org/docs/rendering/server-and-client-components)

nextjs에서 Error: Client network socket disconnected before secure TLS connection was established 오류

nextjs 질문 있습니다! 프로젝트에서 getServerSideProps, getStaticProps를 사용하여 렌더링을 할 경우 페이지 첫 진입 자체는 문제 없는데 새로 고침을 하면 Error: Client network socket disconnected before secure TLS connection was established 위와 같은 오류가 계속 나는데 해결 방법 아시는 분 계신가요?

getServerSideProps를 모든 페이지에서 공통적으로 사용할 수 있는 방법이 있을까요?

Next.js 에서 loginStatus같은 부분들을 CSR로 처리하다보니 새로고침시 false => true로 변경되면서 깜빡이는 문제가 생겨서 SSR로 처리하고싶은데 app.tsx에서 getIntialProps를 사용하였는데 요즘방식에는 getInitialProps보다 getStaticProps나 getServerSideProps를 권장한다고 들어서 변경할려고 합니다… 매 페이지에 공통적으로 들어가는 getServerSideProps같은 경우는 어떻게 처리를 해야할까요…? ㅜㅜ

useSuspenseQuery의 SSR 요청

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

getServerSideProps의 context를 nextjs13에서 사용하기.

현재 nextjs12로 짜여진 코드를 nextjs13으로 옮기는 작업을 하고 있습니다. 기존에 getServerSideProps의 context를 이용하여 많은걸 하고 잇었는데 nextjs13에서 getServerSideProps를 사용할 수 없게 되면서 애를 먹고 있습니다. context의 req, res, resolvedUrl 등을 nextjs13에서도 사용하고 싶은데 어떻게 해야 하나요 ㅜㅜ ??

실시간으로 변하는 좋아요 같은 기능은 SSR로 처리해야되나요, 아님 SSG로 처리해야될까요?

안녕하세요! 혼자서 next로 ssr과 ssg을 얕게나마 경험해보고 싶어서 공부중에 있는데 궁금한 것이 생겨서 질문하려고 찾아왔습니다! 제가 알기로 다이나믹 라우팅을 통하여 데이터의 유동적인 변경이 없는 페이지는 SSG로, 데이터의 변동이 특징인 정적 페이지는 SSR로 데이터를 처리한다고 했던 것 같습니다. 그렇다면 궁금한 부분은 각 컨텐츠의 좋아요 버튼이 있고, 해당 버튼을 클릭 시 좋아요가 증가하게 되는데, 이 좋아요의 개수는 상호작용을 할 시에 꾸준히 변하며 페이지에도 그 변함에 따라서 그 개수를 렌더링에 반영하게 됩니다. 여기서 고민은 SSR인 getServerSideProps랑 SSG인 getStaticProps를 사용하여 get 요청을 받아야되는지 입니다. 제 생각에는 상호작용 컴포넌트를 작동시킬 때마다 Number 타입의 개수를 새로 렌더링에 반영해야되니 getServerSideProps를 써야될 것 같은데, 조금 난해한 것 같아서 다른 개발자분들의 의견을 듣고 싶습니다. 항상 감사합니다 :)

Next.js React-query 관련해서 질문있습니다 ㅜㅜ

안녕하세요 Next.js를 공부하고있는데 현재 페이지 내에서 useQuery 커스텀훅으로 데이터를 가져오고 있는데 SSR 형식으로 getServersideProps를 통해 데이터 패칭을 가져올려고 바꿀려고 합니다 ! 1. getSersideProps 쪽에서도 useQuery 커스텀훅을 사용할수 있을까요..? 2. 혹시 안된다면 데이터 받아오는것을 getServersideProps쪽에서 다 하면 useQuery 커스텀훅은 따로 쓸 필요가 없을까요?! 만약 쓴다면 어떠한 경우에 써야 될까요? 질문이 난잡해서 죄송합니다😭😭

Next.js 질문

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

Next.js middleware 질문입니다

getServerSideProps에서 통신하는 axios의 헤더에 쿠키에 들어있는 엑세스 토큰을 삽입하려고 합니다. 다음과 같이 요청시 헤더에 엑세스 토큰을 넣는 middleware를 작성하고 실행을 시켰는데 동작하지 않습니다. 정확히 말하면 middleware에서 request.url.includes('api') 값을 찍어보면 false밖에 출력되지 않고, 엑세스 토큰이 요청 헤더에 전달되지 않는거 같습니다. next.config에서 프록시 설정도 해주었는데 뭐가 문제일까요? page router 방식이고 로컬 환경에서 실행중입니다.

next.js에서 interceptor 어떻게 사용하고 계신가요?

안녕하세요 page router 형식으로 프로젝트 진행 중 궁금한게 있어 게시글 남깁니다. 현재 프로젝트에서는 두가지 AJAX 요청이 존재하는데요. 한가지는 클라이언트 사이드에서의 요청(좋아요 누르기 기능 등)과 서버 사이드 렌더링을 위한 getserversideprops에서의 요청입니다. 문제는 인증 방식으로 엑세스토큰을 사용중인데 axios interceptor을 사용하려고 보니 하나의 interceptor로 두가지 요청을 커버하기가 어렵겠더라구요. 혹시 비슷한 경험이 있으신분들 어떻게 사용하셨는지 공유해주시면 감사하겠습니다.

Next.js 의 _layout.tsx 파일 내에서 server side 데이터를 활용할 방법이 있을까요 ?

네비게이션 바에서 로그인, 로그아웃 상태를 구분해서 구현을 다르게 해주려고 합니다. 문제는 네비게이션 바 컴포넌트를 _layout.tsx 내에 구분했는데 여기서 getServerSideProps 를 사용할수 없더라고요. API 호출을 사용하면 해결되기는 하지만 getServerSideProps 를 사용할 때보다 느려서 사용하기 애매합니다. 혹시 다른 좋은 방법이 있을까요 ?

Next.js App dir에서 fetch API를 사용할 때 interceptor는 어떻게 설정할 수 있나요?

axios의 interceptor를 사용한 로직이 있었는데, Next의 App dir에서는 getServerSideProps 등이 fetch API 로 대체된걸로 알고 있어요. 이러면 axios의 interceptor를 사용하려면 어떻게 해야할까요? 그리고 fetchAPI가 400번이나 500번 정도의 에러 코드를 제대로 잡지 못한다는 말을 들은 적이 있는데 이건 어떻게 대응할 수 있을까요?

nextjs ssr 관련

안녕하세요. nextjs로 react로 사이트 구축중에 있습니다. 도메인별로 meta tag가 달라지는데 "getServerSideProps"로 매태태크 정보를 가져와서 head에 넣어줘도 브라우저에서는 타이틀을 랜더링하나 카카오톡에서는 적용이 안되고 있는데 혹시 방법을 아시는 분 계실까요? 몇일째 삽질하는 느낌이네요 next-seo로도 ssr 랜더링 해봐도 소스에 노출되는 meta 태그는 없고.ㅜㅜ _document.txt는 도메인을 기준으로 서버 api 호출하는데 도메인을 인식하지 못하고 어렵네요. 혹시 아시는 분 계시면 도움부탁드립니다. 감사합니다.

Next.js와 SSR관련 질문있습니다 !

Next.js 를 공부하다가 궁금증이 생겨 질문합니다 ! 1. Next.js로 만들어진 프로젝트를 S3 + CloudFront와 같은 정적 웹사이트 형태로 배포시에는 SEO와 같은 SSR의 이점을 볼 수 없고, SSR이 동작을 안하는 걸까요?! 2. 페이지 내에서 useEffect를 이용해 api fetch를 통해 데이터를 가져오는 부분이 CSR형태인가요? getServersideProps를 통해 데이터를 받아오면 혹시 이 방법과 비교했을때 장점이 무엇이 있는지… 궁금합니다 ! 질문이 길지만 고수님들 답변 부탁드립니다😭

next js에서 사용자 검증시 화면 안깜빡거림은 ssr만 가능한가요?

안녕하세요, 리액트 넥스트로 앱을 만드는 개발자 입니다. 사용자 검증을 csr(useEffect), ssr(getServerSideProps)둘 다 해보았습니다. 다만 csr의 경우 완전한 렌더링 이후 검증을 하기에 잠시나마 화면 깜빡임이 있습니다. ssr의 경우 서버에서 검증을 하기에 화면 깜빡임은 없지만 모든 화면에 ssr로직을 작성해야 합니다. 만약 화면 깜빡거림 없이 즉시 사용자 정보 UI를 화면에 나타내려면 SSR이나 getinitialProps를 사용하는 방법밖에 없나요?

getServerSideProps를 컴포넌트에서 사용할 수 있나요?

개발 공부하는 학생입니다. next.js를 공부하는 중에 getServerSideProps를 구현했는데 이게 최상위 파일에서만 되고 컴포넌트에서는 호출이 안되는것 같아요. 혹시 어떻게 사용하는지 알려주실분 계신가요?

Next.js 인터셉터 질문드립니다

Next애서 인터셉터 구현할때 getserversideprops에서 사용하는 axios 인터셉터와 클라이언트 컴포넌트에서 사용하는 인터셉터를 따로 구현해야 하나요? 리액트에서 사용하던 인터셉터 로직을 가져와서 적용해봤는데 클라이언트 컴포넌트에서만 작동해서 질문드립니다. 혹시 맞다면 서버 컴포넌트쪽은 어떤식으로 구현하는지 알려주시면 감사하겠습니다. 인터셉터 용도는 사버에서 요청해서 응답으로 받은 엑세스 토큰을 헤더에 넣고 토큰이 유효한지 검사하는 용도이고 page router기반입니다.

Nextjs에서는 무조건 프리페칭하는게 좋은가요?

seo를 고려하지 않아도 되는 페이지도 getserversideprops로 데이터 미리 받아오는게 더 이점이 많은건가요?! 아니면 클라이언트단에서 데이터를 가져오는게 좋을까요?!