인프런 커뮤니티 질문&답변
작성한 질문수
Pre-Rendering 이라는 것이 크게보면 결국 SSR 인가요?
해결된 질문
작성
·
155
0
CSR 과 다르게 서버에서 렌더링 과정을 거쳐 보여주는 것이라면.. 결국 이 과정이 SSR 이라는 것으로 이해를 했는데요.
강의 목차를 보니 SSR, SSG(?) 는 또 따로 나와있어서요..
궁금해서 질문 드립니다 !!!
추후 배울 내용이라 지금 시점에서는 SSR 과는 다르게 Next.js 에서는 "사전 렌더링"이라는 것이 따로 존재한다고 이해하면 되는걸까요?
답변 2
0
안녕하세요, 인프런 AI 인턴입니다.
티라미수님의 질문은 Next.js의 ‘사전 렌더링(pre-rendering)’ 개념과 Server-Side Rendering(SSR), Static Site Generation(SSG)과의 관계에 대한 궁금증으로 보입니다.
Next.js는 사전 렌더링을 통해 애플리케이션의 페이지를 미리 렌더링합니다. 이는 기본적으로 서버에서 모두 처리되므로 일반적인 CSR(Client-Side Rendering)과는 다릅니다. 여기서 사전 렌더링은 크게 두 가지 형태로 나눌 수 있습니다: SSR과 SSG입니다.
SSR (Server-Side Rendering): 이 방식은 사용자의 요청에 따라 각 페이지를 실시간으로 생성합니다. 요청이 있을 때마다 서버에서 HTML을 생성하여 클라이언트로 보냅니다. 다이나믹한 데이터를 다루는 페이지에 적합합니다.
SSG (Static Site Generation): SSG는 빌드 시점에 모든 페이지를 HTML로 미리 생성합니다. 각 페이지가 사용자의 요청 이전에 이미 생성되어있으므로, 요청 시 서버에서 바로 제공할 수 있습니다. 변경되지 않는 데이터를 표시하는 페이지에 적합합니다.
다음은 위의 개념들을 더 자세히 설명하고 있는 지식공유자님의 기존 답변 링크입니다:
- Next.js의 사전 렌더링과 컴포넌트 관련 질문: 이 링크는 Next.js의 프리페칭 기능과 클라이언트 사이드에서 발생하는 페이지 이동, 관련 자원 로드에 대한 과정을 설명합니다.
- getServerSideProps 사용 시: 서버 사이드 렌더링(SSR)을 이용한 페이지 사전 렌더링과 클라이언트 사이드 렌더링(CSR)로의 전환 과정에 대해 설명합니다.
Next.js의 사전 렌더링은 SSR이나 CSR만의 문제가 아니라, 각 페이지와 상황에 맞게 최적화된 렌더링 전략을 선택할 수 있는 유연성을 제공합니다. 따라서, SSR이나 SSG 방식을 적절히 활용하여 성능과 SEO를 개선할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
안녕하세요 이정환입니다.
강의에서 말씀드린 Next.js의 사전 렌더링은 브라우저에서 JavaScript를 실행해 HTML로 렌더링 하기 전에 서버측에서 미리! 한번 렌더링을 거친다는 의미로 SSR, SSG, ISR을 모두 포함하는 개념입니다.
쉽게 말해 사전렌더링의 종류로 SSR, SSG, ISR이 있다! 라고 보시면 될 것 같습니다 😃