#ssg

Next.js SSR을 언제 사용하는게 좋을까요?

현업에서 Next.js 사용할 때, 인증 처리를 미들웨어에서 처리한다면 SSR을 어떤 상황에서 자주 사용하나요? SSG와 동적인 데이터들은 클라이언트 사이드에서 호출해서 불러오는게 매번 페이지를 만드는 것보다 낫지 않을까 라는 생각에 SSR을 더 안사용하려고 하는것 같아서 질문남겨봅니다!!

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

Next.js 서버 컴포넌트와 클라이언트 컴포넌트 관련 질문입니다.

입사한지 얼마 안된 신입 프론트엔드 개발자입니다. 회사에서 Next.js를 사용하게 되어 개념을 공부중입니다. Next.js 12까지 사용되던 SSR과 CSR, SSG의 개념은 문서를 뒤져가며 어느정도 이해했다고 생각합니다. 하지만 이번에 Next.js 13 app dir에서 사용되는 서버 컴포넌트(RSC)와 클라이언트 컴포넌트의 개념을 구글링을 통해 며칠동안 알아봐도 이해가 안가는 부분이 많아 겉핥기식으로만 이해가 갑니다. 제가 앞으로 해야할 분야인데 아무리 문서랑 검색을 통해 정보를 찾아봐도 제대로 이해가 가지않아 질문 올려봅니다. 1. 서버 컴포넌트는 서버에서 렌더링이 된다고 이해했는데, 그렇다면 서버 컴포넌트는 db에 직접 접근할 수 있다는 점 외에 SSR과 어떤 차이점이 있는건가요? 2. Next.js13 app dir는 use client를 사용하지 않은 모든 페이지가 서버 컴포넌트라고 알고있는데, 그렇다면 기존 Next.js12에서 지원하던 SSG은 더이상 Next.js13에서 지원하지 않는 건가요? 아니면 서버 컴포넌트랑 SSG는 공존할 수 있는 개념인가요? 3. 기존 Next.js 12에서는 데이터를 fetching해오지 않는 정적인 페이지는 기본적으로 SSG로 작동한다고 알고있습니다. 그렇다면 Next.js 13에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트이니 데이터를 fetching하지 않는 페이지도 서버에서 렌더링이 되는건가요? 4. 클라이언트 컴포넌트에서 서버 컴포넌트를 import해 사용할 수 없다는데.. 저는 잘만 됩니다. 여기서 서버 컴포넌트는 클라이언트 컴포넌트가 된 건가요? 5. 서버 컴포넌트도 SSR처럼 브라우저에서 해당 페이지를 접속했을 때 렌더링이 되고 클라이언트에 내려오나요? 아직 Next.js 이해도가 낮아 질문이 이상할 수 있습니다. 양해 부탁드립니다. 이게 이해가 안가서 스트레스를 너무 받고있네요.. 도와주세요

react.js VS Next.js 운영비용 외 보안적 측면

안녕하세요. 신규 프로젝트에 대해서 입장을 내야하는 상황입니다. 서비스는 그룹웨어, HR 같은 서비스여서 SEO 는 필요 없는 서비스입니다. 그러면 무조건 react.js , vue.js 같은 CSR 로만 개발하는게 좋을까요? 걱정은 실제 route 가 많은 서비스라면 SEO 가 없어도 Next.js Nuxt.js 와같은 SSR이 더 효과적일까요? 코드 스플릿을 한다고 해서 충분히 react.js 의 js 번들 다운로드 량을 짧은 시간으로 단축이 가능할까요? 스플릿을 잘해서 라우트가 많은데도 3초 이내에 다운로드가 될 수 있다라던가... Next.js 로 하게되면 react.js 배포와 비용차이가 많이 날까요? (SSG 를 사용할 일이 많지는 않음) 일가견 편하게 부탁드립니다. 제가 어떤 걸 알아야 하고, 어떤 내용을 전달할 수 있을까요?

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

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

SSG 의 결과물이 preload 된 상태가 정확히 어떤 상태인가요 ?

SSG 방식에서 preload 된 페이지를 CDN을 통해 접근하여 가져온다고 하는데 pre-load되었다는 말은 DOM 구성이 완료된 상태를 말하나요?

Nextjs의 ssr, ssg, isr을 각각 언제 적용하는게 좋을지 기준과 구체적인 예시가 궁금합니다.

ssg : 빌드 때 정적 파일 생성해 빠르게 전달 가능하지만 다시 빌드할 때 까지 변경이 불가능하다. isr : 임의의 주기마다 재빌드 가능하지만 그 주기를 특정하기 어렵다. ssr : 깜빡임 없이 매 요청 마다 정적 파일을 만들어서 보내주지만 서버 요청 시간이 길어지면 사용자가 흰 화면을 오래 보게 된다. 제가 공부하면서 느낀 세가지 렌더링 방식의 장단점입니다. SEO가 필요 없고 초기에 데이터를 패칭해 반영하는 페이지가 있다고 했을 때, csr이 아닌 굳이 이것들을 적용해야 할 상황이 있을까 하는 생각이 듭니다. 흔히 예시로 드는 아주 명확한 상황이 아닌, 실무에서 적용해보시고 효과를 거둔 케이스와 판단 기준이 궁금합니다.

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을 사용하여 페이지를 그린다면 이유가 뭔가요?