Growth Log : by dpwls

Appearance

0814 ​

기분이 조은 날이네요.....
감사한 하루 입니다.........
감사합니다........................
공부할게 좀 더 있는데 오늘은 잠깐 기쁨을 즐길게여!!!

SSR ​

  • 만약 next.js를 사용하지 않는다면 어떻게 ssr을 만들 수 있을까?
  • 어떠한 프레임워크도 사용하지 않고 순수하게 ssr을 만드려면 어떻게 해야될까?
  • ssr은 html과 css, js를 먼저 서버에서 생성한 후 클라이언트딴에 보내는걸 의미한다.
  • 애초에 서버에서 html을 어떻게 생성하는걸까?
  • 클라이언트의 라우팅 요청이 들어오면 (product/a와 같이)
  • 서버는 해당 요청을 보고 필요한 데이터를 가져올거다.
  • 그 후 서버에서는 html 구조를 문자열로 조립한다.
    • 문자열로 조립한다는게 무슨 뜻일까?
    • 렌더링 과정 자체는 클라이언트딴에서 동작을해야한다.
    • 근데 렌더링에 필요한 Hyper Text Markup Language 문자 자체는 서버에서 먼저 생성할 수 있다.
    • 그래서 이걸 정적으로 서버에서 먼저 생성 한 후에 클라이언트딴으로 보내면 클라이언트에서 해당 데이터를 갖고와서 렌더링하는거다.
  • 코드로 보자면 아래와 같다.
js
import http from 'http';  
const server = http.createServer((req, res) => {  
	const html = `  
		<!DOCTYPE html>  
		<html>  
			<head>  
				<title>ssr</title>  
				<meta charset="UTF-8">  
			</head>  
			<body>  
				<h1>ssr</h1>  
			</body>  
		</html>  
	`;  
	res.writeHead(200, { 'Content-Type':'text/html'});  
	res.end(html);  
})  
server.listen(3000, ()=>{  
	console.log(`http://localhost:3000`);  
})
  • 만약 js랑 css를 넣고 싶다면?
    • 인라인 방식을 사용한다면 그냥 저 html이라는 문자열 안에 값을 그대로 넣으면 되고, 외부 파일이라면 정적 파일을 서빙해서 불러온다
      Pasted image 20250814131148
  • 만약 react나 vue 같은 프레임워크를 사용한다면?
    • 해당 프레임워크의 코드를 서버에서 실행한 HTML 문자열을 생성한 뒤
    • 실제 HTML과 앞서 만든 문자열을 조합
    • 왜? 가상 DOM을 실제 DOM에 결합하는 방식이니까
txt
[Browser]  
   ↓ HTTP Request  
[SSR Server]  
   ├── Router  
   ├── Data Layer (API/DB)  
   ├── Render Layer (React/Vue/EJS)  
   └── HTML Template  
   ↓ HTML Response  
[Browser Renders + Hydrates]
  • 근데 리액트 서버컴포넌트는 어떤 원리길래 무조건 서버에서만 실행되어야 하는거지?
    • 서버에서 react 전용 런타임(react flight protocol)이 react 컴포넌트를 실행한 뒤 해당 전용 런타임이 이해할 수 있는 특별한 형식으로 직렬화 되어 클라이언트로 전송된다.
    • 클라이언트 측은 html 문서가 아닌 특별한 형식의 구조를 받기에 자바스크립트와 관련된 정보를 받을 수 없어서 서버 컴포넌트는 하이드레이션이 불가능하다는거다.
    • 그니까 서버에서 리액트를 직렬화해서 보내면 클라이언트는 역직렬화를 해서 DOM으로 만든다.
  • 비유하자면
    • ssr은 빵 레시피도 주고 빵도 줘서 집에가서 레시피를 보고 다시 빵을 따라 만들 수 있지만
    • server componenet는 레시피는 안 줘서 빵을 맛만 볼 수 있는..
  • 아니 근데 왜 굳이 서버 컴포넌트를 써야되는걸까?
    • 클라이언트 측의 JS 번들량을 최소화하기 위해서
    • 클라이언트 측에 민감한 정보를 전송하지 않기 위해서

React ​

리렌더링 조건 ​

  1. 컴포넌트의 state가 변경됐을때
  2. 상속받은 컴포넌트가 리렌더링 됐을때
  3. 상속받은 컴포넌트의 props가 변경됐을때
    • 부모 컴포넌트에서 자식 컴포넌트로 전달하는 props의 값이 달라졌을 때만 자식이 리렌더링되고 DOM의 내용까지 변경된다.
      => 그래서 props drilling이 일어나면 리렌더링이 빈번하게 일어나니까 이를 방지하기 위해 전역에서 상태를 관리하는거다. 물론 전역에서 상태를 관리하더라도 리렌더링은 발생한다. 이 때 context api를 사용했을 때와 zustand나 redux와 같은 라이브러리를 사용했을 때 리렌더링 되는 범위가 다르니까 둘의 차이가 발생하는거다.