#서버사이드

React면 되는것을 굳이 Next.js로 구현하는것

SEO나 서버사이드 렌더링이 필요없는 서비스를 구현할 때, 이걸 그냥 React로 개발하는것과 Next.js로 개발하는것의 차이가 있나요? 저는 Next.js를 써야겠다 싶은 경우가 아니면 React로 개발하고 싶은데, Next.js에서 모든 컴포넌트를 그냥 다 클라이언트 컴포넌트로 하면 React랑 똑같은 거 아니야? 라는 질문을 들었을 때 할말이 없더라구요. React만으로 구현할 수 있는걸 굳이 Next.js를 쓰는게, 뭔가 그냥.. 닭잡는데 소잡는 칼 쓰는 느낌이라 굳이 그럴필요 없다 정도로만 생각했는데 정확한 근거를 들어보라니 대답을 못하겠더군요 둘의 차이가 정확히 무엇일까요? 기존의 SPA 앱같은걸 개발할 때 React만 쓰는게 좋은 이유가 있나요?

next socket.io 연결, 제가 어떤 부분을 놓치고 있을까요?

https://github.com/hyubbb/socket-test-app 안녕하세요. 간단하게 채팅방을 만들어서 유저의 입장/퇴장, 채팅 기능을 구현해볼려고 하는데요. 통신이 됬다 안됬다 하더라구요? 그래서 계속 새로고침을 누르거나 해야하는 현상이 있습니다. 서버와의 연결은 계속 되어있다고 하는데 , socket.on 이나 socket.emit 이 동작을 안하는데 정말 이해가 안됩니다. 콘솔을 찍어봤을땐, next가 캐싱처리를 해서 실시간으로 응답하는게 문제가 발생한게 아닐까 생각했는데, 정확하게 갈피를 잡지 못하겠습니다. 3일을 헤매고 있는데요. 제가 어떤 부분을 놓치고 있는지 알려주시면 너무 감사하겠습니다. 코드가 길어서 github에 업로드 하였습니다. 클릭 라우트 처리 components/chat/chat-list socket.emit 발생장소 components/chat/chat-room 소켓 프로바이더 components/providers/socket-provider socket서버사이드 설정 pages/api/socket/io.ts

API 서버에 데이터 요청 처리 질문입니다!

안녕하세요. API 서버를 별도로 구축하고, 인증은 토큰방식으로 체택했습니다! 이제 웹페이지를 제작하고있는데요, 문득 드는 의문이 API서버에 대한 데이터 요청은 클라이언트 사이드단에서 처리를 해야 맞는건가요? 아니면, 서버 사이드단에서 처리를 해야 맞는건가요? 인가에 대한 토큰은 쿠키에 있다고 한다면, 1. 클라이언트 사이드단 처리 클라이언트에서 브라우저의 쿠키 접근 -> 인가 토큰 획득 -> 헤더에 포함하여, API서버에 요청. -> 데이터 요청 완료. 2. 서버사이드 처리 클라이언트에서 브라우저의 쿠키를 헤더에 포함하여 서버사이드로 데이터 요청 -> 서버사이드에서 인가토큰을 획득하여, API서버에 요청 -> 클라이언트에게 해당 데이터를 응답 -> 데이터 요청 완료. 1번 방법은 API서버가 외부에 노출되어있어서 보안에 취약하지만, 트래픽이 많아질경우, API서버에 대한 처리만 잘 하면 될것같고, 2번 방법은 API서버는 웹서버와만 통신을 하니, 보안에 강하지만, 트래픽이 많아질경우, 웹서버에 대한 처리, API 서버에 대한 처리 둘다 고민해야할것같은데.. 보통 어느방법을 선택하나요??

nextjs 서버사이드 데이터페칭 질문입니다.

안녕하세요. 다른분들의 고견을 여쭙고자 합니다. next에서 app라우트 방식을 이용해서 개발을 진행하고 있는데요 좋아요한 게시글을 불러오는데. 속도를 위해서 서버사이드에서 불러와서 클라이언트 사이드에 뿌려주는데요. 클라이언트 사이드에서 좋아요 버튼을 누르면 -> 좋아요 데이터를 파이어베이스 서버에 저장 -> 좋아요 페이지에서 확인 -> 업데이트가 안됩니다. 그도 그럴것이 서버사이드는 업데이트가 되지 않기 때문이고 새로고침을 해야만 하기 때문이라고 생각합니다. 초기값을 서버사이드에서 불러온후에 그 후의 데이터들은 recoil로만 관리한다? 이런것도 아닌것 같구요. 이 문제를 해결할려면 초기데이터를 불러오는것 부터 전부다 클라이언트 사이드에서 해야만 하는 것 일까요? 이 문제를 해결할려면 tanstack-query를 사용해야할까요? 모르는점이 많네요. 아시는 내용이있으시면 답변주시면 너무 감사하겠습니다.

클라이언트, 서버 두 DB의 데이터를 동시에 수정할 때 무결성 보장

안녕하세요 어플리케이션을 만드는 도중 문제가 생겼습니다. indexedDB( 클라이언트 ), postgreSql( 서버 ) 2곳의 데이터를 동일하게 수정해야할 때 ( 추가, 삭제, 수정 등 ) 한 곳의 api 가 실패하는 순간 이미 수정이 된 곳의 트랜잭션을 롤백 ( abort ) 하여 연동된 두 곳의 데이터가 동일 하도록 무결성을 보장하고자 합니다. 그런데 2가지 문제를 발견하였습니다. 1. indexedDB 의 트랜잭션 도중 다른 api 의 await를 쓰는 순간 indexedDB 는 트랜잭션을 즉시 종료시켜 서버 데이터 수정이 실패해도 abort() 가 불가능하다. 2. postgreSql 의 트랜잭션은 next.js 의 서버사이드 api에서 쿼리를 날리기에 중간에 클라이언트 사이드의 indexedDB 수정 api 사용이 불가능하다. indexedDB는 idb, postgreSql 은 pg 라이브러리를 사용중입니다. 수정 되기 전 상태를 임의로 기록 > 2번째 api 실패? > 기록된 상태로 수정하는 api 요청 이라는 단순한 방법도 생각해봤지만 결국 마지막 상태로 수정하는 것도 별도의 api 요청이기에 이 것또한 실패할 시 무결성 보장이 되지않기에 포기하였습니다... 선배님들은 서버와 클라이언트 데이터를 연동할때 무결성 보장을 어떻게 하시나요? next.js 14 환경입니다.

서버사이드렌더링 페이지에서 참조하는 DB가 변한것을 어떻게 알게 할 수 있을까요

넥스트js 13 app라우터를 사용중입니다 A라는 SeverSideRendering페이지에서 fetch를 이용해서 get을 서버에 요청해서 Db를 받아오고 있습니다 B라는 페이지에서는 버튼을 누르면 DB를 변경시켜줍니다 B페이지에서 버튼을 눌렀을때 A페이지의 데이터가 바로바로 변경이 안되는데 무슨이유인지 궁금하고 이것을 해결하는 방법이 궁금합니다

Next.js의 dynamic import를 이용한 Ref 전달

현재 next.js 13버전과 toast ui calendar를 사용해서 프로젝트를 진행하고있습니다. toast ui calendar는 서버사이드에서는 렌더링이 되지 않기 때문에 dynamic 함수를 사용해서 import를 했습니다. dynamic 함수를 사용해서 import한 component에 ref를 넘기는 방법이 궁금합니다! https://careerly.co.kr/qnas/2078 위의 질문글을 보고 현재 아래 코드와 같이 작성을했는데 이렇게 작성을 하게된다면 결국 TuiCalendar라는 컴포넌트에는 ref={ref}, forwardRef를 사용해서 넘기는것이 아닌 forwardedRef라는 props로 ref를 넘기는형태가 되는건데 dynamic 함수를 사용해서 받아온 컴포넌트에 ref를 넘기는것은 이방법밖에 없을까요? 또한 "use client" import { useRef } from "react"; import Child from "./child"; export default function Parent (props : any) { const testRef = useRef(3) return ( <> <button onClick={() => console.log(testRef.current)}>버튼</button> <Child testRef={testRef} /> </> ) } 이것과 같이 ref를 그냥 props로 넘기는것과 ref + forwardRef 로넘기는 것의 차이점을 알고싶습니다!

[next-auth] 서버사이드에서 session 생성 및 수정 하는 방법

(next.js 13버전 app route 기준) 안녕하세요. 이번 프로젝트에서 next-auth를 사용하여 인증 구현을 진행 하고 있는데요. 일반적인 사용법들은 구현을 하였습니다. - 클라이언트에서 signIn, signOut, update 등 session 제어 - 서버사이드에서 getServerSession를 사용하여 session 정보 확인 하지만, 아래의 두 가지를 구현하는 것에 있어 어려움을 겪고 있습니다. 1. 서버사이드에서 사이트 첫 접속 시(새로고침 시) session이 없다면 세션 자동 생성 2. 서버사이드 전용 axios 유틸 파일에서 session의 토큰이 만료되었다면, refresh token(쿠키)으로 새로운 access token을 가져와서 기존 session에 업데이트 후 재요청 next-auth를 많이 사용하는 것 같고, 서버와 클라이언트에서 적절히 사용하실 것 같은데 아무리 찾아봐도 위에 대한 해결책은 없는 것 같습니다. 1번 사항과 같이 서버 사이드에서 session을 즉시 만드는 경우는 저희 프로젝트에 좀 특수한 경우인 것 같고, 2번의 경우는 일반적인 토큰 갱신 방식인 것 같은데 토큰 갱신은 서버사이드에서 어떻게 할 수 있을까요? 해결 방안이 있거나, 이러한 상황에서는 어쩔 수 없이 access token을 쿠키로만 관리해야 하는 것인지 의견 부탁 드립니다. 서버와 클라이언트에서 access token의 만료 갱신 처리를 위해 access token을 보통 어디에 관리하시나요? cookie만이 방법일까요?

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] 서버사이드 렌더링을 하는 페이지에서 Swiper.js 컴포넌트를 사용하면 스타일이 깨집니다.

안녕하세요 next.js에서 Swiper.js 라이브러리를 사용할 때 발생하는 이슈 관련해서 도움을 받고자 질문드립니다. SSR 페이지에서 Swiper 컴포넌트를 사용하면 아래와 같은 에러가 나오면서 스타일이 깨지는 이슈가 있습니다. Warning: Extra attributes from the server: style 해당 이슈를 해결하기 위해 dynamic import로 Swiper를 사용하는 컴포넌트를 감싸고 SSR:false를 적용했는데요. 이렇게 하면 스타일 이슈는 해결되지만, 해당 컴포넌트가 서버렌더링 되는 html에 포함되지 않아 SEO 이슈가 있을까 걱정됩니다. 혹시 이런 에러를 겪어본 분이 있을까요? 좋은 해결책이나 원인을 아는분들 답변 부탁드립니다! 감사합니다.

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

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

nextjs hydration failed because the initial ui...

안녕하세요. nextjs에서 로그인 유저만 접근 가능한 페이지를 만들기 위해 withAuthRoute라는 HOC 컴포넌트를 구현하여 사용하고 있습니다. HOC에서는 브라우저의 스토리지를 파악해서 토큰이 있으면 Component를 리턴하고 아니면 null을 리턴합니다. 서버사이드 렌더링시에는 스토리지에 접근할 수 없어서 window 객체가 undefined인지를 체크하는 코드가 있습니다. 여기서 문제가 있는데, withAuthRoute컴포넌트로 페이지를 감싸면 항상 nextjs hydration failed because the initial ui does not match what was rendered on the server에러가 발생합니다. 어떤 글 찾아보면 무시해도 되는 에러라고 하는데 로컬에서 너무 신경쓰여서 해결하고싶습니다... 혹시 이런에러 해결해보신 분 있으실까요?