기타

렌더링 방식 (SSR,CSR, SPA, MPA)

js0616 2024. 7. 25. 22:26

1. SSR(Server-Side Rendering)

SSR은 서버 측에서 웹 페이지의 UI를 생성하여 클라이언트에게 전달하는 방식입니다.

  1. 동작 방식:
    • 클라이언트가 페이지를 요청하면, 서버는 요청된 페이지의 HTML을 서버 측에서 동적으로 렌더링합니다.
    • 서버는 데이터를 가져와서 필요한 HTML을 생성하고, 완성된 HTML을 클라이언트에게 반환합니다.
    • 클라이언트는 서버로부터 받은 HTML을 바로 화면에 렌더링합니다.
  2. 특징:
    • SEO에 유리합니다. 검색 엔진은 HTML을 읽고 인덱싱할 수 있어 검색 결과에 노출될 가능성이 높습니다.
    • 초기 로딩 속도가 빠릅니다. 서버에서 완전한 HTML을 받아오기 때문에 초기 렌더링 시간이 짧습니다.
    • 사용자가 페이지를 요청할 때마다 서버에서 데이터를 가져와 동적으로 페이지를 구성할 수 있습니다.
  3. 예시:
    • React와 같은 프레임워크에서 서버 측 렌더링을 구현할 수 있습니다. React에서는 ReactDOMServer를 사용하여 서버 측에서 컴포넌트를 렌더링한 후 HTML 문자열로 변환하여 클라이언트에게 제공합니다.

2. CSR(Client-Side Rendering)

CSR은 클라이언트 측에서 JavaScript를 사용하여 동적으로 웹 페이지의 UI를 생성하는 방식입니다.

  1. 동작 방식:
    • 클라이언트가 페이지를 요청하면, 서버는 정적인 HTML 파일과 필요한 JavaScript 파일을 제공합니다.
    • 클라이언트는 JavaScript를 사용하여 초기 HTML을 받고, 추가적인 데이터가 필요할 때 API 요청을 통해 데이터를 가져옵니다.
    • 클라이언트는 받아온 데이터를 사용하여 동적으로 UI를 업데이트하고 화면을 렌더링합니다.
  2. 특징:
    • 사용자 경험이 좋습니다. 초기 로딩 이후에는 페이지 갱신이 빠르며, 사용자와의 상호작용이 원활합니다.
    • 서버의 부담이 적습니다. 서버는 정적 파일만 제공하고, 데이터는 클라이언트에서 처리하기 때문에 서버 부하가 감소합니다.
    • 검색 엔진 최적화가 어려울 수 있습니다. 초기에는 빈 페이지가 로드되고, 데이터가 채워지기 전까지는 검색 엔진이 내용을 인식하기 어려울 수 있습니다.
  3. 예시:
    • React, Vue.js, Angular와 같은 클라이언트 사이드 프레임워크에서 CSR을 기본적으로 사용합니다. 이들 프레임워크는 JavaScript를 사용하여 UI를 동적으로 생성하고 관리합니다.

결론

SSR과 CSR은 각각의 장단점과 사용 시나리오에 따라 선택되어야 합니다.

SEO가 중요하고 초기 로딩 속도가 중요한 경우 SSR을 고려할 수 있으며,

사용자 경험과 서버 부담을 줄이고자 할 때는 CSR을 고려할 수 있습니다.

최신 웹 개발에서는 두 기술을 조합하여 Hybrid Rendering과 같은 방식을 사용하기도 합니다.

 

SPA (Single Page Application)

SPA는 단일 HTML 페이지를 기반으로 동작하는 웹 애플리케이션입니다.

주로 클라이언트 사이드 렌더링(CSR) 방식을 사용합니다.

SPA는 초기에 HTML, CSS, JavaScript 등의 필수 자원을 클라이언트에게 한 번에 제공하고, 이후에는 필요한 데이터만을 서버로부터 비동기적으로 받아와서 페이지를 업데이트합니다.

주로 React, Angular, Vue.js 등의 프레임워크나 라이브러리를 사용하여 개발됩니다.

 

특징:

  • 클라이언트 사이드 렌더링: 초기 HTML을 받은 후, JavaScript를 사용하여 동적으로 페이지를 렌더링합니다.
  • 단일 페이지: 하나의 HTML 페이지로 시작하고, 페이지 전환 시 새로고침 없이 데이터만을 업데이트합니다.
  • 사용자 경험: 빠르고 부드러운 사용자 인터랙션을 제공할 수 있습니다.

 

MPA (Multiple Page Application)

MPA는 여러 개의 HTML 페이지로 구성된 전통적인 웹 애플리케이션입니다.

각 페이지는 서버에서 완전히 렌더링된 후에 클라이언트에게 전달됩니다.

이는 주로 SSR(Server-Side Rendering) 방식을 의미합니다.

사용자가 각각의 페이지를 요청할 때마다 서버는 해당 페이지의 HTML을 생성하여 반환합니다.

특징:

  • 서버 사이드 렌더링: 각 페이지는 서버에서 완전히 렌더링되어 클라이언트에게 전달됩니다.
  • 다중 페이지: 여러 개의 HTML 페이지로 구성되며, 각각의 페이지는 별도의 요청과 응답 과정을 거칩니다.
  • SEO 최적화: 검색 엔진이 페이지의 콘텐츠를 쉽게 인덱싱할 수 있습니다.

 

 

선택 기준

  • 사용자 경험: 사용자 인터랙션의 빈도와 중요도에 따라 CSR 또는 SSR 방식을 선택합니다. 빠른 페이지 전환과 부드러운 사용자 경험을 원한다면 CSR이 적합합니다.
  • SEO 요구: 검색 엔진 최적화가 필요한 경우 SSR이나, CSR에서 서버 사이드 렌더링을 지원하는 방식을 고려해야 합니다.
  • 서버 부하: 서버의 부하를 줄이고자 한다면 CSR 방식이 유리할 수 있으나, 초기 로딩 속도와 사용자 경험을 고려해야 합니다.

 

 

ssr 예제


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

// 기본 라우트 설정
app.get('/', (req, res) => {
  // 여기서 SSR 구현
  res.send('<h1>Hello, SSR!</h1>');
});

// 서버 시작
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

 

ssr 의 경우 서버(express) 측에서 렌더링 해서 보내주는거고

 

 

csr 예제


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

// 정적 파일 제공 (React 애플리케이션을 빌드한 결과물 제공)
app.use(express.static(path.join(__dirname, 'build')));

// 기본 라우트 설정
app.get('/', (req, res) => {
  // index.html 파일을 클라이언트에게 전송
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 서버 시작
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

 

csr 의 경우 요청에 따라서 파일을 보내주어 클라이언트 측에서 렌더링 하게된다.

 

 

html, css, javascript 로 이루어진 페이지를 만들면?

 

일반적으로 HTML, CSS, JavaScript로 이루어진 페이지를 만들 경우, 그 페이지는 정적인 자원으로 서버 사이드 렌더링(SSR)이라기보다는 클라이언트 사이드 렌더링(CSR) 방식에 더 가깝습니다.

 

 

 

 

https://chatgpt.com/