#getstaticprops

Next.js 질문

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

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의 공식문서에는 그러한 내용을 찾기가 어려워서 정확한 정보인지 알고 싶습니다!

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

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

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” 때의 각각의 장단점이 궁금합니다….! (똑같아보여서…😭) 질문이 길지만 너무 감사합니다😂

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

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

NextJs 사용할때 getStaticProps 에서나 아니면 다른곳에서 dispatch 사용하는방법이 있을까요?

아직 시도는 안해봤는데 dispatch 도 결국 use이니깐 컴포넌트함수가 아니면 실행이 안되는걸로 알고있는데 리덕스 액션 요청하는 방법이 따로 있을까요?

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 공식문서에서 getStaticProps()관련 문구의 해석을 했음에도 이해가 되지 않습니다.

The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situation by using a Middleware to rewrite the path. 위의 내용입니다. 해석해도 무슨의미인지 이해가 되지 않습니다.

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 위와 같은 오류가 계속 나는데 해결 방법 아시는 분 계신가요?

next.js getStaticProps에서 user agent를 확인하는 방법?

안녕하세요 next.js로 웹 사이트를 만들고 있는데 질문이 있습니다. 서버사이드에서 mobile 기기 접속여부를 알아야 하는데 getStaticProps안에서 user agent를 확인하는 방법이 있을까요?

nextjs 13 getStaticProps 질문

안녕하세요. nextjs 13에서 변경된 app 디렉토리에서는 getStaticProps를 지원하지 않고 fetch의 cache로 getStaticProps 등의 동작을 수행할 수 있게 된 부분에 있어서 의문점이 생겨서 질문 남깁니다. 1. 서버 컴포넌트니까 console등은 서버에서 찍히는 것을 확인하였습니다. 이것은 서버 컴포넌트는 항상 ssr로 동작한다는 의미인것인가요? 2. fetch를 사용하지 않고서는 static, ssr, isr 을 구분시킬 수 없는 건가요? 3. 이전 버전(12)에서는 getStaticProps를 사용해서 fs, gray-matter 같은 static하게 서버에서 생성 해놓기를 원했던 경우에 사용하기도 하였는데 이런 부분은 구현할 수가 없는 건가요? (코드 첨부)

next js getStaticProps rehydration 질문 있습니다.

SSG, ISR, SSR 이론은 다 알고 있습니다. 그런데 개발도중 NEXT.JS 고질병인 client, server 충돌경고를 종종 겪는중 의문이 생겼습니다. 페이지를 미리 그리는데 왜 에러가 나지 하는 생각에 질문 드립니다. 1. 만약 SSG로 만든 페이지가 HTML로 만들어져서 화면에 미리 렌더링이 되는데, 그럼 미리 렌더링된 이후(제어권이 리액트로 넘어감) CSR은 화면을 로드할때 사전에 만든 HTML을 로딩하나요? 아니면 해당 페이지를 새로 그리나요? 2. 만약 새로 페이지를 그린다면 기존 pre render된 html 파일 내용과 csr이 그린 데이터가 다르면 next.js가 match 경고를 출력하나요? 2.1 next js에서 server, client 내용이 다르면 match경고를 발생시키는 이유는 무엇인가요? 3. csr이 미리 만들어진 html을 사용하여 페이지를 그린다면 이유가 뭔가요?