[javascript] 앵귤러와 서버 사이드 렌더링(SSR)

05 Dec 2023

javascript

앵귤러(Angular)는 현대적인 웹 애플리케이션을 개발하기 위한 강력한 프레임워크입니다. 그러나 기본적으로 클라이언트 사이드 렌더링을 지원하며, 초기 로딩 속도와 검색 엔진 최적화를 개선하기 위해 서버 사이드 렌더링(SSR)이 필요한 경우도 있습니다.

서버 사이드 렌더링(SSR)이란?

서버 사이드 렌더링(SSR)은 서버에서 초기 페이지 렌더링을 수행하는 방식입니다. 이는 클라이언트 사이드 렌더링(CSR)과 다르게, 서버에서 HTML, CSS 및 JavaScript 코드를 생성하여 클라이언트에게 전달하는 방식입니다.

앵귤러에서의 서버 사이드 렌더링(SSR) 구현

앵귤러에서 서버 사이드 렌더링을 구현하기 위해 @angular/platform-server 모듈을 사용합니다. 이 모듈은 우리가 컴포넌트를 서버에서 렌더링하기 위한 도구를 제공합니다.

// Server-side rendering with Angular

import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import fs from 'fs';

// Read the server bundle generated by Angular CLI
const serverBundle = fs.readFileSync('./dist/server/main.js', 'utf8');

// Enable production mode
enableProdMode();

// Load the server bundle
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

// Render the application for a given URL
function renderApp(url) {
  const renderOptions = {
    document: fs.readFileSync('./dist/index.html', 'utf8'),
    url,
    extraProviders: [
      {
        provide: 'REQUEST',
        useValue: { url },
      },
    ],
  };

  return renderModuleFactory(AppServerModuleNgFactory, renderOptions);
}

// Start the server
const server = require('http').createServer(async (req, res) => {
  const { AppServerModule, AppServerModuleNgFactory } = await serverBundle;
  const renderedHtml = await renderApp(req.url);

  res.status(200).send(renderedHtml);
});

server.listen(3000, () => {
  console.log('Angular SSR server running on port 3000');
});

위의 코드는 서버 사이드 렌더링을 구현하기 위한 한 예시입니다. renderApp() 함수를 통해 주어진 URL에 대해 앵귤러 애플리케이션을 렌더링하고, server.listen()을 사용하여 서버를 시작합니다.

서버 사이드 렌더링의 이점

서버 사이드 렌더링을 사용하면 다음과 같은 이점을 얻을 수 있습니다:

초기 로딩 속도 개선: 서버에서 HTML을 생성하여 클라이언트에게 전달하므로, 초기 페이지 로딩 속도가 향상됩니다.
검색 엔진 최적화(SEO): 검색 엔진은 서버에서 제공되는 HTML을 크롤링할 수 있으므로, 검색 엔진 최적화가 개선됩니다.
향상된 사용자 경험: 페이지 로딩 중에 빈 화면이 표시되는 것을 방지하고, 사용자가 더 빠르게 애플리케이션을 사용할 수 있습니다.

결론

앵귤러를 사용하여 서버 사이드 렌더링을 구현하는 것은 초기 로딩 속도와 검색 엔진 최적화를 개선하기 위한 좋은 방법입니다. 앵귤러의 @angular/platform-server 모듈을 활용하여 서버 사이드 렌더링을 구현하고, 이를 통해 향상된 사용자 경험을 제공할 수 있습니다.

참고 문서: