[질문] react -> nextjs 넘어가려다 든 생각인데

[익명(58.232)]

어짜피 돌고돌아 SSR이면,

가독성 좀 구려도 쉽게 배우고 바로 써먹을 수 있는 jsp, thymeleaf, mustache 같은거 쓰면 되는거 아냐?

왜 js, ts, react, 온갖 react library, nextjs 이런거 다 배워서 씀?

중견, 대기업은 자금여유가 있으니까 프론트 따로 뽑을 수 있다고 해도,

소규모 기업은 언어하나 배우는거, 프론트 한명 더 뽑는게 돈 많이 나갈텐데

[익명(220.86)]

next는 이제 rsc로 ssr, csr 하이브리드 느낌이지 않나? jsp는 순수 ssr이고

[익명(58.232)]

아 Hydration이 이걸 말하는건가? 첫 페이지만 SSR 느낌나게 뿌리고, 그 다음에 이어지는 페이지는 CSR로 스무스하게 이어지도록 하는거

[익명(58.232)]

첫페이지 SSR해서 1. 빠른 렌더링 2. SEO이점 가져가기, 첫 페이지와 이어지는 다음 페이지들은 CSR로 스무스하게 이어지게 하기 요 2가지 때문에 쓰는거 같긴 한데

[익명(220.86)]

그건 기존에 next가 ssr하는 방식인데 이게 일반적 용어인지 모르겠으나 universal rendering이라고 함

[익명(58.232)]

저 2개 이점 때문에 프론트 스택을 js, ts, react, 온갖 react library, nextjs를 깎는다는건가? 왠만큼 큰 기업 아니면, 위에 서술한 저 2가지 이점 때문에 이정도의 인풋이 필요로 하는게 그리 효율적이진 않다는 생각이 드네

[익명(58.232)]

위에 서술한 2가지 이점을 난 hydration이라고 이해했는데 universal rendering이라고도 하나보네

[익명(220.86)]

hydration은 첫페이지만 html을 보낸 다음 같이 보낸 js 파일을 통해 dom에 이벤트 같은거 붙여서 interactive하게 만드는 과정을 hydration이라 함

[익명(58.232)]

ㅇㅇ. 난 그걸 첫페이지를 SSR로 뿌리고 다음 페이지들을 CSR로 스무스하게 이어지게 하게끔 하는 기술로 이해함

[익명(58.232)]

그 기술 자체는 hydration이라는 이름이고, hydration이라는 기술로 SSR -> CSR 이던 SSG이던 ISR이던 페이지에 맞게 커스텀하는걸 universal rendering이라 이해함

[익명(anon0)]

Ssr ssg csr을 통합해서 ssr로 로드하고 csr로 계속 바꿔주는등 뭔가 최종형태의 느낌이던데 universal rendering이라 하던가

[익명(175.209)]

대부분 프론트랑 백엔드 분리되어 있기도 하고 SSR 만 할때도 js, ts 로 SSR 하는게 DX 가 좋기도 함

[익명(58.232)]

같은 백엔드 서버에서 프론트랑 백이 같은 jsp / thymeleaf / mustache 를 보고 소통하면서 만드는게 다른 언어, 프레임워크로 분리된 환경에서 다른 코드베이스를 보면서 소통하는 것 보다 더 효율적이지 않나? (안해봐서 모름)

[익명(58.232)]

html + java 짬뽕된 JSP 보다가 잘 모듈화된 react 코드 보면 DX가 좋을 것 같긴 한데, 이게 다른 언어랑 많은 라이브러리, 프레임워크를 배울 만큼 이점이 있는건가? (있으니까 하겠지만..)

[익명(175.209)]

js도 파고들면 엄청 딥해지는데 이때 jsp 등 위에 올려서 하면 dx가 시간이 갈수록 낮아질거임. 단순 개발뿐만 아니라 모든 프레임워크나 인프라가 js쪽에 맞춰져서 남들은 딸깍하면 되는데 일일히 고친다던지

[익명(117.111)]

csr이 왜 나왔는지를 이해못한것 같은데

[익명(58.232)]

첫페이지 js 번들 다 풀 때 까지 기다리기만 하면, 화면 스무스하게 바뀌니까 UX 좋아서 쓰는게 CSR아님? 이렇게 이해하고 있는데

[익명(117.111)]

csr이 나오면서 생긴 js프레임워크들의 장점이 ㅈㄴ 많음 코드스플리팅 컴포넌트기반 린트 이미지 폰트최적화 툴링 수많은 zod hookform lodash dnd 같은 패키지 생산성의 dx든 속도의 ux든 걍 넘사임 대기업은 심심해서 그러는게 아니고 생산성이 더좋은데 속도까지 빨라서 선택한거임

[익명(117.111)]

근데 이걸 다 가지고 seo나 ssr의 장점까지 챙길 수 있게 된거임 그래서 jsp보다 next가 나음 근데 이건 next12까지의 내용임

[익명(117.111)]

https://frontendmastery.com/posts/rethinking-react-best-practices/

[익명(117.111)]

그 뒤의 nex13이후의 변화는 이걸 보면됨

[익명(58.232)]

일단 키워드 던진거 잘 읽었음.

[익명(58.232)]

심지어 nextjs 보니까 백엔든거 같더만. firebase에서 데이터 끌어와서 페이지 만들어서 SSR로 뿌리던데, 그럼 기존에 스프링 REST API 서버 있으면, 굳이 next에서 스프링 서버로 값 요청해서 받아오는게 아니라, 스프링 REST API 코드를 nextjs로 마이그레이션 해야 하는거 아님?

[익명(58.232)]

그럼 결국 기존에 spring + jsp나 php인데, universal rendering 기능 차이만 있다고 봐도 무방한거 아님?

[익명(58.232)]

근데 이 universal rendering 기능 때문에 기존 스택 다 내다 버리는 선택이 합리적임?

[익명(113.59)]

그래서 요즘에 htmx, liveview, livewire 같은게 뜨는건가.. - dc App

[익명(104.28)]

liveview는 나머지 두개하고 좀 다른게 rsc가 추구하는것의 끝판왕임 웹소켓으로 데이터주고받아서 반쪽짜리streaming이런거 필요없음ㅋㅋㅋ

[익명(211.176)]

템플릿엔진 써봄? 난 끔찍하던데

[익명(58.232)]

템플릿 엔진 DX가 별로긴 한데, DX를 올리자고 다른 언어 + 라이브러리들 + 프레임워크들 + 개발 방법론들 + 여타 요구 지식, 테크닉 등 을 배우는게 합리적인가 의문이 들어서 글작성함

[익명(211.176)]

이미 프론트 자체가 리액트로 넘어간 상황에서 비슷한 넥스트 좀 더 배운다고 비합리적일 것 같진 않은데

[익명(58.232)]

이미 배운 사람한테는 넥스트 얹는게 큰 차이는 없겠지만, 만약에 개발 팀을 꾸려야 하는 회사 입장이거나, 새로 개발을 배우는 사람이면, next를 배우는게 맞는 선택이려나 모르겠네

[익명(211.176)]

근데 이런 고민해서 뭐함? 대부분의 회사들은 다 쓰고 있는데

[익명(58.232)]

걍 문득 궁금증이 들었음. 애써 배웠는데 쓰잘데기 없으면 안되잖아. 나름의 배우는 이유가 있어야 배울 맛도 나기도 하고

[익명(112.150)]

next 작동하는게 첫페이지만 ssr이나 ssg로 가져오고, 다음 작업은 리액트처럼 csr쓰는 방식임? 이때는 usestate같은 것도 쓰나? 모든 상호작용에 페이지 새로고침을 하지 않잖아

[익명(58.232)]

걍 얼추 듣기로는 next는 첫 페이지는 서버에서 SSR처럼 html 내용물 채워서 내려주는데, 다 완성시켜서 내려주는게 아니라, 이벤트 리스너나 react component의 dynamic 기능들 빼고 내려준다고 함. 그래서 SSR처럼 첫 페이지 로드 빠르고 SEO챙기기 가능. 근데 첫 페이지 받은 이후 빠르게 event handler 붙이고 react component 활성화 시켜서 CSR로 작동하게 한다고 함

[익명(58.232)]

그러니까 nextjs에서 맨 처음 페이지 받으면 html의 글자들은 어느정도 채워진 상태이긴 한데, 이벤트리스너들 안붙어있고, react component의 useState같은것도 안붙어 있다고 난 이해함. 글자는 보이지만 동적인것들은 작동 안되는 상태랄까

[익명(112.150)]

그렇구나. 이게 인터넷에 next가 뭔지 처보면 거의 대부분이 그냥 서버에서 페이지만드는 거다 라고만 하고, 그다음은 리액트처럼 csr로 동작한다 아니다 이런말이 없어서 헷갈렸음 ㄱㅅㄱㅅ

[익명(104.28)]

이거는 내가 간단하게 얘기해줄 수 있음 개좆소는 필요없는게 맞다 은행앱 느린거 써봤냐? 로딩시간 몇초늦어지는걸로 사용자이탈하고 금전적인 손실이 몇십억 들면 조금이라도 빠른거 쓰는거고 그런거 필요없는 개좆소는 필요없고ㅇㅇ

[익명(58.232)]

ㅇㅋ. 이제 중소기업 스택란에 jsp가 왜 적혀있는지 납득함

[익명(58.232)]

근데 Next쓰는 기업은 기존에 스프링 REST API서버 있던거 Next로 마이그레이션 하고 그럼?

[Zuto(chotnt741)]

모바일 환경이 중요한 세상에서 인터랙션 처리가 좋은 csr은 필수..

[익명(175.193)]

ssr csr 같이 쓰는걸 고작이라 하는 순간 이해가 안되는거임. 화면 그려지는 퍼포먼스나 프론트엔드에서 많은걸 해줄 수 있단거 생각하면 고작 따위가 아님

[익명(211.209)]

ssr csr로 기존에 같이하는게 어려웠지 한 리액트 코드로 ssr, csr 둘다 할 수 있게 해주는게 react의 ssr 지원인거고, 그 지원을 스무스하게 해주는게 next.