Next.js를 사용하시는 분들이라면, 공부를 해보신 분들이라면 "use client"로 페이지 렌더링을 어떻게 할지 설정한 경우가 있을 거에요. 아 혹시!! 렌더링을 설정한다는 것도 모르겼나요?? 괜찮습니다. 제가 그랬거든요.오늘은 "use client"!!!!"대체 언제 써야 하고, 왜 중요한 거지?" 에 대해서 알려드릴게요!1. Next.js: 서버에서? 브라우저에서?Next.js는 SSR(서버 사이드 렌더링) 덕분에 서버에서 HTML을 미리 만들어서 쏴줍니다. 덕분에 SEO에도 좋고 초기 로딩도 빠르죠! 근데… 모든 걸 SSR로 해결할 수는 없어요. 🤔 예를 들어, 우리가 버튼을 클릭하거나 스크롤 이벤트를 처리하고 싶다면 브라우저에서 실행해야겠죠?여기서 바로 CSR(클라이언트 사이드 렌더링)이 ..

웹 개발을 하다 보면 한 번쯤 들어봤을 리액트(React)와 넥스트.js(Next.js)!이 둘의 차이점 중 하나는 바로 렌더링 방식이야. 그럼 이 두 강력한 툴의 렌더링에 대해 알아볼까? 🔥리액트: 클라이언트 사이드 렌더링(CSR)의 대표주자! 🌐리액트는 클라이언트 사이드 렌더링(CSR)을 사용해. 여기서 "렌더링의 주체가 클라이언트"라는 말이 무슨 뜻이냐고? 쉽게 말해, 웹 브라우저에서 모든 걸 처리한다는 뜻이지.리액트 렌더링 방식웹 브라우저에서 렌더링이 이루어짐페이지 소스를 보면 자바스크립트로 가득 찬 파일들만 보임검색엔진 최적화(SEO)에 불리할 수 있음 🤔리액트 공식 홈페이지에 가서 페이지 소스를 보면, 실제 화면에 보이는 텍스트나 버튼 등이 HTML 소스에는 없고, 자바스크립트 파일로만 ..