[node js] node 의 렌더과정

2024년 12월 19일

KIMJAVAN
작성자
2024.12.19.:52

728x90

Node.js의 렌더링 과정은 클라이언트 요청을 처리하고 서버가 응답을 반환하는 일련의 흐름을 의미합니다. 렌더링 방식은 SSR (서버 사이드 렌더링), CSR (클라이언트 사이드 렌더링), 그리고 SSG (정적 사이트 생성) 등 여러 가지 방식으로 나눌 수 있습니다.

아래에서 Node.js의 렌더링 과정과 각 방식의 개념을 설명드리겠습니다.

1. 기본적인 Node.js 요청-응답 흐름

과정 설명

클라이언트 (브라우저)가 서버로 HTTP 요청을 보냅니다.
Node.js 서버는 요청을 수신하고 라우터를 통해 적절한 핸들러로 전달합니다.
서버는 데이터베이스에서 데이터를 가져오거나 비즈니스 로직을 처리합니다.
처리된 데이터를 기반으로 HTML, JSON 또는 파일 등을 반환합니다.
브라우저는 서버의 응답을 받아 화면에 렌더링합니다.

2. 렌더링 방식 종류

A. 서버 사이드 렌더링 (SSR, Server Side Rendering)

서버에서 HTML을 생성하고 클라이언트에 완성된 HTML을 전달하는 방식입니다.
브라우저가 받자마자 화면에 바로 렌더링됩니다.

SSR의 과정:

Node.js 서버가 클라이언트 요청을 받습니다.
서버는 동적 데이터를 가져와 HTML 파일을 서버에서 렌더링합니다.
완성된 HTML을 클라이언트에 반환합니다.
브라우저는 이미 완성된 HTML을 받아서 화면에 바로 렌더링합니다.

예시:

const express = require("express");
const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  // 서버에서 HTML을 렌더링
  const html = `<html>
                  <head><title>SSR Example</title></head>
                  <body><h1>Hello from Server-Side Rendering</h1></body>
                </html>`;
  res.send(html);
});

app.listen(PORT, () => console.log(`Server running at http://localhost:${PORT}`));

장점: SEO 최적화, 빠른 첫 화면 로딩
단점: 서버 부하 증가, 매 요청마다 HTML을 생성

B. 클라이언트 사이드 렌더링 (CSR, Client Side Rendering)

서버는 빈 HTML과 JavaScript 파일을 전달하고, 클라이언트(브라우저)가 JavaScript를 실행해서 HTML을 렌더링하는 방식입니다.

CSR의 과정:

Node.js 서버는 클라이언트에 빈 HTML 파일과 JavaScript를 반환합니다.
브라우저는 JavaScript를 실행하여 화면을 동적으로 생성합니다.
클라이언트 측에서 API 요청 등을 통해 데이터를 가져옵니다.
데이터를 받아 화면에 렌더링합니다.

예시 (React의 CSR):

React/Vue 등 프론트엔드 라이브러리는 CSR 방식을 기본으로 사용합니다.
JavaScript가 비활성화된 브라우저에서는 화면이 렌더링되지 않습니다.

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

app.use(express.static("public")); // React 빌드 파일 제공

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

장점: 서버 부하 감소, 빠른 페이지 전환
단점: 초기 로딩이 느릴 수 있고 SEO 최적화에 불리함

C. 정적 사이트 생성 (SSG, Static Site Generation)

빌드 타임에 HTML 파일을 미리 생성하여 제공하는 방식입니다.
서버는 정적 HTML 파일을 반환하기만 하면 됩니다.

SSG의 과정:

빌드 과정에서 정적 HTML 파일을 생성합니다.
클라이언트 요청 시 미리 생성된 HTML 파일을 반환합니다.
필요하면 JavaScript를 통해 동적 데이터를 추가합니다.

Next.js 예시 (SSG):

export async function getStaticProps() {
  const data = await fetch("https://api.example.com/data").then(res => res.json());
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

장점: 빠른 로딩 속도, 서버 부하 없음
단점: 빌드 타임이 길어질 수 있고 동적 데이터 처리에 제한이 있음

3. Node.js와 프레임워크 활용

Node.js에서 렌더링을 효율적으로 수행하기 위해 다음과 같은 프레임워크를 활용할 수 있습니다:

Express.js: SSR과 CSR을 모두 지원하는 서버 프레임워크
Next.js: React 기반, SSR과 SSG 지원
Nuxt.js: Vue 기반, SSR과 SSG 지원
SvelteKit: Svelte 기반의 SSR/SSG 지원

4. 결론

Node.js의 렌더링 과정은 서버 측 렌더링(SSR), 클라이언트 측 렌더링(CSR), **정적 사이트 생성(SSG)**의 3가지 방식으로 나눌 수 있습니다.

SSR: 서버에서 완성된 HTML을 제공 (SEO 최적화에 유리)
CSR: 클라이언트에서 JavaScript로 동적 렌더링 (빠른 페이지 전환)
SSG: 빌드 시 HTML을 미리 생성 (최적의 성능 제공)

각 렌더링 방식을 필요에 따라 선택하고, Node.js 프레임워크와 함께 사용하면 더욱 효율적인 웹 애플리케이션을 개발할 수 있습니다. 😊

'자바스크립트 > Node JS' 카테고리의 다른 글

[Node Js] node js 공부기록 (2)	2024.11.29
[NodeJS] multer (0)	2024.08.16
[NodeJs] POST PUT 차이 (0)	2024.04.01
[Node JS] header / body 에 값 담기 차이 (0)	2024.04.01
[NodeJS] Autorization / Header (0)	2024.04.01

다음 글이 없습니다.

이전 글이 없습니다.