서버 사이드 렌더링은 웹 컨텐츠들을 렌더링하는 전통적인 방법중 하나이다. SSR은 한페이지의 전체 컨텐츠들을 만들어서, 클라이언트에서 요청을 하면 응답으로 내려주는 방식이다. 그리고 그 웹 컨텐츠는 외부 API나 데이터베이스로부터 받은 데이터를 포함시킬수도 있다.
fetch나 연결작업들은 서버에서 이루어진다. 컨텐츠들이 들어가야하는 HTML은 역시나 서버에서 생성된다. SSR은 데이터를 fetching하거나, 포맷팅하는데 추가적인 요청응답과정을 거치지 않아도 된다. 따라서 클라이언트에서는 렌더링 코드가 필요하지 않으며 이에 대응하는 JavaScript를 클라이언트에 보낼 필요도 없습니다.
SSR을 사용하면 모든 요청이 독립적으로 처리되며 서버에서 새 요청으로 처리 된다.연속된 두 요청의 출력이 크게 다르지 않더라도 서버는 이를 처음부터 처리하고 생성합니다.서버는 여러 사용자에게 공통이므로 처리 능력은 주어진 시간에 모든 활성 사용자가 공유합니다. (서버는 하나의 컴퓨터에서 수행된다는 것)
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body>
<div>
<h1>Hello, world!</h1>
<b>It is <div id=currentTime></div></b>
</div>
</body>
</html>
function tick() {
var d = new Date();
var n = d.toLocaleTimeString();
document.getElementById("currentTime").innerHTML = n;
}
setInterval(tick, 1000);
해당 코드는 서버에서 응답되는 코드라고 가정하자! 시간은 클라이언트 기준 시간으로 찍힐 것이다!. 서버 시간과 같은 서버 관련 기타 데이터를 표시하려면 렌더링되기 전에 해당 데이터를 HTML에 포함해야 합니다.
서버에서 렌더링 코드를 실행하고 JavaScript를 줄이면 다음과 같은 이점이 있습니다.
FCP 및 TTI가 더 빨라진다.