SSR(Server-side Rendering)은 서버에서 생성한 HTML 페이지를 렌더링합니다. 간단하게 말하면 서버가 문서 작업을 담당하고, 클라이언트는 보여주기만 합니다. HTML이 생성되면, 클라이언트로 HTML, JSON 데이터, 상호작용을 위한 JS 명령어를 전송합니다.
클라이언트는 상호작용이 불가능한 HTML 빠르게 표시하고, React는 JSON data와 JS 명령어를로 컴포넌트가 상호작용이 가능하도록 만듭니다. 이 과정을 Hydration(수화)이라고 합니다.
Pre-Rendering
Server-Side Rendering(SSR)과 Static Site Generation(SSG)은 data fetch와 React 컴포넌트를 HTML로 변환하는 작업이 클라이언트에 서버가 응답하기 전에 발생하므로, Pre-Rendering이라고도 합니다.
장점 및 단점
먼저 클라이언트의 JavaScript 작업을 줄이므로써, 페이지 로딩 시간을 줄이고 일반적으로 더 빠르게 페이지를 보여줍니다. CSR이었다면 클라이언트가 js를 실행하면서 서버와 데이터 핑퐁을 쳤어야겠죠.
그렇다면 사용자의 device와 네트워크 상태에 덜 의존적이기도 하겠네요. 서버에서 로직과 데이터를 처리하기 때문에 사용자 device의 성능이나 네트워크 상태에 비교적 자유로울테니까요.
다만, 페이지를 생성하는데 시간이 걸리므로 복잡한 애플리케이션인 경우 사용자가 클릭하고 페이지가 열리기까지의 시간이 오래 걸릴 수 있습니다. 서버로부터 완성된 HTML을 전달받기 전까지 클라이언트는 빈 화면을 오랫동안 보여줘야 하는 상황이 발생할 수 있습니다. 이때 서버는 처리할 양이 많기 때문에 컴퓨팅 오버헤드가 발생하겠네요. 트래픽이 몰릴 경우 응답이 느려지거나, 메모리의 한도 초과로 서버가 멈추는 것 처럼요. CSR의 경우, 클라이언트가 필요하다는 데이터만 전달하면 되고 동일한 응답이 가능하니 CSR이 캐싱에도 용이해서 부하를 줄일 수 있어요. 하지만 SSR은 필요한 데이터로 결과물(HTML)을 완성까지 시켜서 전달해야해서 부하를 줄이기 상대적으로 어렵겠네요.
SPA에서 필요한 이유
js를 실행하지 않는 검색 엔진 크롤러는 빈 데이터 또는 로딩 상태만 보게 됩니다. js를 실행한다고 하더라도, 사용자의 기기 성능 혹은 네트워크 상태에 따라 js 실행을 방해 받을 수 있습니다. 이는 SEO를 위한 콘텐츠 크롤링과 인덱싱(검색 엔진의 사전에 등록)에 부정적인 영향을 줍니다.
예를 들어 기존 CSR의 경우, 검색 엔진 크롤러가 사이트의 정보를 긁어모으러 왔을 때 바로 어떤 사이트인지 소개시켜주기 어려울 거에요. 서버로부터 html을 받아 짠! 하고 크롤러에게 보여줬는데 이렇게 body 태그가 비어있을테니까요.. 뒤늦게 브라우저가 asset을 다운로드 받고, javascript로 페이지를 로드한다 하더라도 크롤러는 이미 떠난 뒤입니다. 크롤러 입장에서는 이 사이트는 아무 내용도 없는 깡통 사이트일 뿐이겠지요.
<!DOCTYPE html>
<html>
<head><title>My app</title></head>
<body>
<div id="app"></div>
</body>
</html>
Next.js에서 사용
각 요청마다 해당 페이지를 pre-render합니다.
Server-side Rendering을 적용하기 위해서 비동기 getServerSideProps 함수를 export 해야 합니다.
export default function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}getStaticProps와 매우 비슷하지만, getServerSideProps는 매 요청시에만, getStaticProps는 빌드 시에만 호출됩니다.
출처
- SSR: https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering
- Rendering on the Web: https://web.dev/rendering-on-the-web/
- SSR이란? by 오종택님: https://lean-mahogany-686.notion.site/2-1-SSR-dd6ad9e4db0c4b06b286d103587eee98
- Rendering: https://nextjs.org/learn/foundations/how-nextjs-works/rendering
'Next.js' 카테고리의 다른 글
| [Next.js] 라우팅과 네비게이션의 동작 (0) | 2024.06.14 |
|---|---|
| CSR부터 RSC까지 렌더링 방식의 변화 (0) | 2024.06.08 |
| CSR(Client-side Rendering) (0) | 2023.06.30 |
