[javascript] 자바스크립트 뷰 프레임워크에서의 서버 사이드 렌더링은 어떤 방법이 있나요?

12 Dec 2023

javascript

1. 프레임워크 기반 렌더링: 일부 자바스크립트 뷰 프레임워크(예: React)는 서버 사이드 렌더링을 지원하며, 일반적으로 뷰 컴포넌트를 서버에서 렌더링하여 HTML을 생성합니다. 이를 통해 초기 로딩 시간을 최적화하고 SEO를 개선할 수 있습니다. React의 경우, ReactDOMServer를 사용하여 서버 사이드 렌더링을 수행할 수 있습니다.

import ReactDOMServer from 'react-dom/server';
const html = ReactDOMServer.renderToString(<App />);

2. 프레임워크 외부 렌더링: 뷰 라이브러리나 프레임워크를 사용하지 않고 순수 자바스크립트로 서버 사이드 렌더링을 구현할 수 있습니다. 이를 통해 뷰 레이어와 관련된 작업을 직접 처리할 수 있으며, 서버에서 템플릿 엔진(예: EJS, Handlebars)을 사용하여 HTML을 동적으로 생성할 수 있습니다.

const template = (data) => `
  <!DOCTYPE html>
  <html>
    <head>
      <title>${data.title}</title>
    </head>
    <body>
      <div>${data.content}</div>
    </body>
  </html>
`;

3. 서버리스 렌더링: 서버리스 아키텍처에서는 서버 사이드 렌더링을 AWS Lambda, Google Cloud Functions 또는 Azure Functions와 같은 서버리스 함수를 사용하여 처리할 수 있습니다. 클라이언트 측 코드는 서버리스 함수를 호출하여 HTML을 받아올 수 있습니다.

이러한 방법들을 사용하여 자바스크립트 뷰 프레임워크의 서버 사이드 렌더링을 구현할 수 있습니다.