인프런 커뮤니티 질문&답변
작성한 질문수
Suspense질문
해결된 질문
작성
·
193
0
선생님 Suspense는 그러면 언제언제 써야하는건가요?? 어떤 함수일때 빌드시 오류나는지 다 알수는 없으니 빌드시 마다 확인을 해야할까요?
기존 page router와 다른게 뭔가 CSR SSR SSG ISR 이렇게 배우다가 갑자기 정적페이지 동적페이지 하는게 나오는데 랜더링 방식이랑 같은의미인건지... 궁금합니다.
답변 2
0
안녕하세요 이정환입니다.
Suspense는 이후의 스트리밍 기능을 위해 사용됩니다. 6섹션에서 살펴보니 이후의 과정을 수강 하시길 권장드립니다. 추가로 Suspense로 감싸주어야만 하는 함수는 Next.js가 자체 제공하는 것으로는 일단 useSearchParams 외에는 없는걸로 알고 있습니다.
만약 향후 추가로 생겨나거나, 사실은 더 있었다고 해도 오류 메세지에 친절히 "Suspense로 감싸주어야 한다" 라고 나타나니 걱정하지 않으셔도 됩니다.
SSR, SSG, ISR은 페이지 라우터에서만 사용되는 단어입니다. 앱 라우터 버전부터는 빌드 타임에 정적으로 페이지를 생성하는 Static, 그렇지 않고 브라우저의 요청마다 매번 새롭게 페이지를 생성하는 Dynamic이 존재합니다.
쉽게 말해 페이지 라우터 버전의 SSG와 앱 라우터 버전의 Static 페이지가 비슷하고, 페이지 라우터 버전의 SSR과 앱 라우터 버전의 Dynamic 페이지가 비슷하다고 볼 수 있겠습니다.
"Next.js는 SSG 프레임워크라고 봐야 하는가?" 라는 질문을 주신 걸까요? 그렇다면 제 대답은 아니오 입니다 ㅎㅎ! 그럼 Next.js는 SSR 프레임워크라고 봐야 할까요? 이 역시도 제 대답은 아니오입니다.
그렇다면 Next.js는 뭐라고 정의해야 할까요? 정답은 Next.js는 React.js의 확장판, 메타 프레임워크라고 정의하는게 정확합니다.
그 이유는 SSG, SSR 모두 Next.js가 제공하는 기능 중 극히 일부일 뿐이기 때문입니다. 예를 들어 자동차에 시동을 거는 기능이 있다고 해서 자동차를 "시동거는 기계" 라고 표현하지 않는 것 처럼 Next.js 역시 SSG, SSR을 포함해 매우 다양한 기능을 제공하는 React.js의 확장판 일 뿐 입니다.
모든 기능은 각각 장단점을 갖습니다. 따라서 모든 상황에 정답이 될 수 있는 기술은 세상에 존재하지 않습니다. 그렇기 때문에 SSG던 SSR이던 모두 소중한 기능이고 다 잘 알아 두셔야 합니다.
답변 감사합니다~!!
많은 면접이나 채용공고 보면 next.js 와 서버 사이드 렌더링을 무조건 묶어서 이야기해서 그렇게 이해하고 있었는데 이제 막상 vercel 측에서는 권장이 정적인 페이지를 요구를 하니 그게 좀 혼동되었던것 같습니다.
어느정도 궁금증이 해소 되었습니다 너무 감사합니다~!!
선생님 나중에 로그인 관련 로직으로 한번 api ruter 사용해서 인증 인가 로직적으로 한번 시각적 자료로 설명해주시면 너무 감사하겠습니다!!
선생님이 설명해주시면 너무 좋을거 같아요 ㅠㅠ 시각적 자료 너무 좋아요!! 머릿속으로 생각해보면 선생님 시각자료가 딱 떠올라서 너무 좋네요
NextAuth.js와 묶어서 같이 나중에 강의라도 꼭 내주시면 너무 좋을거같아요 ㅠㅠ
0
안녕하세요, 인프런 AI 인턴입니다. uphoon님.
Suspense를 언제 사용해야 하는지에 대한 질문에 대해 답변드리겠습니다. Suspense는 주로 비동기적 데이터 로딩 시에 사용됩니다. React에서는 비동기 작업을 보다 자연스럽게 처리하기 위해 Suspense를 제공하는데, 주로 데이터가 준비될 때까지 기다리는 로딩 상태를 관리할 때 사용합니다. 따라서, 특정 비동기 함수나 컴포넌트 렌더링 중에 데이터가 준비되지 않았을 경우 이를 캡슐화하는 데 도움을 줍니다.
빌드 시 발생하는 오류에 대해서는 특정 패턴이나 사용 방법을 알기보다는, 공식 문서나 에러 메시지를 통해 해결하세요. 빌드 에러는 종종 사용 중인 패키지 버전이나 설정 문제에서 발생하기 때문에, 경고 메시지를 주의 깊게 확인하시는 것이 중요합니다.
기존 Page Router와 관련된 CSR(클라이언트 사이드 렌더링), SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), ISR(증분 정적 생성)과 같은 개념과 관련하여, 정적 페이지와 동적 페이지는 렌더링 방식 측면에서 다릅니다. 정적 페이지는 미리 생성되어 서비스되는 반면, 동적 페이지는 사용자 요청에 따라 서버에서 생성됩니다. 이러한 렌더링 개념들이 Next.js에서 어떻게 구현되는지를 이해하며 학습하는 것이 유익할 것입니다.
Next.js의 Suspense 사용법에 대한 설명에서 더 자세한 정보를 얻으실 수 있습니다. 랜더링 방식에 대한 차이점을 명확히 이해하시면 Next.js의 장점을 효율적으로 활용할 수 있습니다.
현재 제공해드린 정보가 도움이 되셨길 바라며, 추가적으로 궁금한 점이나 이해가 되지 않는 부분이 있으시면 언제든지 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
선생님 그러면 보통 사람들이 서버사이드 랜더링을 위해 next.js 를 많이 도입하는걸로 알고 있습니다 그러면 선생님이 강의 중간에 말씀주신 대부분 Static페이지를 권장한다고하는데 그러면 next.js ssg 프레이워크라고 봐야하는걸까요? 많은사람들이 ssr 프레임워크라고 말하는데 제가 잘못 알고 있는걸까요 갑자기 ㅠㅠ 세션 5정도 오면서 page router랑 비교해서 보니 헷갈리네요 ㅠㅠ