Server Side Rendering과 Client Side Rendering #16

yuiseo · 2024-11-08T10:43:49Z

📝 제목: Server Side Rendering(SSR)과 Client Side Rendering(CSR)의 이해

📚 주제:
Next.js에서 사용되는 Server Side Rendering(SSR)과 Client Side Rendering(CSR)의 개념 및 차이점 설명

🎯 스터디 목표
설명: SSR과 CSR의 차이점을 명확히 이해하고, 각 방식의 장단점을 학습하기

📖 핵심 내용:

1. Server Side Rendering(SSR)

SSR은 사용자가 페이지를 요청할 때 서버에서 HTML을 생성하여 사용자에게 전달하는 방식
화면을 그리는(렌더링) 주체가 서버! (why? html을 생성하는 것은 서버니까!)
서버에서 모든 데이터 처리가 완료된 후 브라우저에 전달되므로 초기 페이지 로드 시 완성된 HTML을 제공

레스토랑에 비유하면?

레스토랑에서 음식을 주문했을 때, 주방에서 미리 요리를 다 만들어서 고객에게 가져다주는 상황
고객은 음식을 받아서 바로 먹을 수 있음!
요리를 가져올 때까지의 시간이 걸리지만, 받자마자 준비된 요리를 바로 먹을 수 있음

1. 사용자가 웹사이트에 요청을 보낸다
2. 서버는 렌더링 가능한 HTML 파일을 만든다
3. 브라우저는 빠르게 HTML파일을 읽을 수 있어 화면은 렌더링 된 상태이지만 아직 JS 파일을 읽지 않았기 때문에 조작은 불가능하다.
4. 브라우저가 JS를 읽는다
5. 이제 유저는 콘텐츠를 보고 사용자의 조작도 기록된다.
6. 브라우저가 JS 프레임워크를 실행한다
7. 기록된 사용자 조작도 실행되고 페이지 상호작용도 가능해진다.

장점

초기 로딩 속도가 빠르고, SEO(검색엔진 최적화)에 유리
서버에서 콘텐츠를 생성하므로 사용자 경험이 향상

단점

초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느림
서버에 부하가 많이 걸릴 수 있으며, 서버 응답 속도에 따라 렌더링 속도가 영향을 받을 수 있음

2. Client Side Rendering(CSR)

CSR은 초기 요청 시 최소한의 HTML과 JavaScript를 보내고, 브라우저에서 JavaScript가 실행되어 콘텐츠를 렌더링하는 방식
즉 서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그림
주로 React 같은 SPA 프레임워크에서 사용

식당에 비유하면?

즉석 요리 코너에서 음식을 받는다고 생각하기
고객은 빈 접시를 먼저 받지만, 직접 요리할 재료를 제공받아 테이블에서 요리를 마친 후에 먹어 함!
처음에는 비어 있지만, 조금 기다리면 원하는 음식이 완성

1. 사용자가 웹사이트에 요청을 보낸다.
2. CDN이 빠르게 HTML파일과 JS파일에 접근할 수 있는 링크를 보낸다.
- CDN(Content Delivery Network)콘텐츠 전송네트워크 : 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
3. 브라우저는 HTML,JS 파일을 다운받고 그동안 화면에는 아무것도 보이지 않는다.
4. 브라우저가 JS파일을 읽는다. (이때도 화면 안보임)
5. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들은 placeholder를 보게된다. )
6. 서버가 API 요청에 응답한다
7. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.

장점:

초기 로딩 이후의 인터랙티브한 경험이 향상
새로고침이 발생하지 않아 사용자 경험에 도움
사용자가 페이지 간 이동 시 더 빠른 전환이 가능
필요한, 변경된 데이터만 받아오므로 트래픽 감소

단점

초기 로딩 시 콘텐츠가 비어 있는 상태로 시작되기 때문에 SEO에 불리
첫 화면이 보이기까지 시간이 오래 걸릴 수 있음

3. SSR과 CSR의 실제 코드 예제

1. SSR (Server-Side Rendering)

서버에서 HTML을 렌더링하여 클라이언트에 전송합니다.
서버가 요청을 받으면, 즉시 HTML 파일을 생성해 브라우저로 전송합니다.
브라우저는 받은 HTML을 렌더링합니다.

const express = require('express');
const app = express();

// 클라이언트가 '/' 경로로 요청을 보내면 서버가 HTML을 만들어 보냅니다.
app.get('/', (req, res) => {
    res.send('<html><body><h1>Hello, SSR!</h1></body></html>');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

브라우저가 서버에 접속하면, 서버가 HTML을 만들어서 보내줌
브라우저는 이를 바로 보여줌

2. CSR (Client-Side Rendering)

클라이언트가 HTML을 먼저 받은 후, JavaScript로 동적으로 내용을 추가
서버는 기본 HTML과 JavaScript만 전송
브라우저는 JavaScript를 실행하여 필요한 내용을 동적으로 표시

<!DOCTYPE html>
<html>
<head>
    <title>CSR Example</title>
    <script>
        // 페이지가 로드된 후 JavaScript가 실행되어 내용이 추가됩니다.
        document.addEventListener('DOMContentLoaded', () => {
            document.body.innerHTML = '<h1>Hello, CSR!</h1>';
        });
    </script>
</head>
<body>
</body>
</html>

브라우저는 처음에 빈 HTML과 JavaScript 파일을 받음
JavaScript가 실행되면서 화면에 <h1>Hello, CSR!</h1>가 표시

차이점 요약

SSR은 서버에서 HTML을 미리 만들어 보내어, 빠른 초기 화면 로딩.
CSR은 브라우저가 HTML파일 JS파일 다 읽고 프레임워크 실행까지 다 하고나서야 페이지가 보여지고 상호작용이 가능.
따라서, 초기 로딩은 느릴 수 있지만, 이후 상호작용은 빠름.

4. Next.js에서의 활용

Next.js는 SSR과 CSR을 모두 지원
상황에 맞게 getServerSideProps, getStaticProps 등을 사용해 SSR을 구현하거나, 기본적인 CSR 방식을 사용할 수 있음
프로젝트의 성격(SEO 필요성, 데이터 변경 빈도 등)에 따라 적합한 방식을 선택할 수 있음

💡 참고 자료:
https://f-lab.kr/insight/ssr-vs-csr-20240707?gad_source=1&gclid=Cj0KCQiA0MG5BhD1ARIsAEcZtwRswlpe85ZfezLC9LMYaDjNSXt_yw6x0ovOIASB68nUKbFsmy2pe4gaAguFEALw_wcB

https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-SSR%EA%B3%BC-CSR
https://bigyou98.tistory.com/entry/Nextjs-%EC%93%B0%EB%A9%B4-SSR-%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%95%84%EB%8B%98

The text was updated successfully, but these errors were encountered:

yuiseo added 💡 질문 리스트 직무 관련 궁금증과 해결이 필요한 질문들 프론트엔드 질문 리스트의 직무 구분을 위한 라벨 labels Nov 8, 2024

yuiseo self-assigned this Nov 8, 2024

yuiseo added this to the 11월 2주차 (11/12 화) milestone Nov 10, 2024

suna-ji closed this as completed Nov 14, 2024

suna-ji reopened this Dec 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server Side Rendering과 Client Side Rendering #16

Server Side Rendering과 Client Side Rendering #16

yuiseo commented Nov 8, 2024 •

edited

Loading

Server Side Rendering과 Client Side Rendering #16

Server Side Rendering과 Client Side Rendering #16

Comments

yuiseo commented Nov 8, 2024 • edited Loading

📝 제목: Server Side Rendering(SSR)과 Client Side Rendering(CSR)의 이해

📚 주제: Next.js에서 사용되는 Server Side Rendering(SSR)과 Client Side Rendering(CSR)의 개념 및 차이점 설명

1. Server Side Rendering(SSR)

레스토랑에 비유하면?

장점

단점

2. Client Side Rendering(CSR)

식당에 비유하면?

장점:

단점

3. SSR과 CSR의 실제 코드 예제

1. SSR (Server-Side Rendering)

2. CSR (Client-Side Rendering)

차이점 요약

4. Next.js에서의 활용

yuiseo commented Nov 8, 2024 •

edited

Loading

📚 주제:
Next.js에서 사용되는 Server Side Rendering(SSR)과 Client Side Rendering(CSR)의 개념 및 차이점 설명