웹 애플리케이션의 렌더링 방식과 Next.js웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Cdevmark.tistory.com서버 사이드 렌더링 (SSR)요청이 들어올 때마다 사전 렌더링을 진행하는 방식getServerSideProps커포넌트보다 먼저 실행되어서 컴포넌트에 필요한 데이터를 불러오는 함수export const getServerSideProps = () => { const data = "hello"; return { props: { data, }, };};export default function Page({ d..

웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Client Side Rendering)클라이언트 사이드 렌더링은 웹 페이지의 렌더링을 사용자의 브라우저가 담당하는 방식이다. 사용자가 웹 페이지를 요청하면 서버는 가장 기본적인 HTML 구조인 텅 빈 index.html을 먼저 전달하고, 이후 필요한 자바스크립트 파일과 리액트 컴포넌트 등을 클라이언트로 전송한다.동작 과정사용자가 웹 페이지에 접속하면 서버는 초기 구조만 있는 index.html을 전송브라우저는 이 HTML 파일을 받은 후, 리액트 라이브러리와 컴포넌트들을 서버로부터 다운로드리액트가 로드되고 ..