노드 웹 페이지 세그먼트 렌더링에 대한 자세한 설명

저자：Eve Cole 업데이트 시간：2025-08-25 23:32:01

페이지 렌더링은 일반적으로 프론트 엔드 렌더링 및 백엔드 렌더링으로 나뉩니다. 프론트 엔드 렌더링은 서버가 HTML 프레임 워크 및 템플릿을 반환하는 것을 말하며, 프론트 엔드는 데이터를 가져 와서 AJAX 비동기 요청을 통해 템플릿을 렌더링하고 DOM을 동적으로 수정하여 최종 페이지를 형성합니다. 서버 측 렌더링은 서버가 백엔드에서 데이터를 가져 와서 전체 페이지를 렌더링하고 클라이언트로 돌아갈 때입니다. 두 가지 방법에는 고유 한 이점이 있습니다. 백엔드 렌더링은 첫 번째 화면 시간 증가, 요청 수를 줄이고 SEO 혜택과 같은 혜택을 제공합니다. 그러나 기존의 백엔드 직접 렌더링은 클라이언트로 돌아 가기 전에 전체 웹 페이지가 렌더링 될 때까지 기다려야합니다. 블록이 데이터를 천천히 끌어 당기면 렌더링 속도에 영향을 미치면 사용자의 경우 대기 중에도 더 길어집니다. 백엔드 렌더링은 프론트 엔드 Ajax 렌더링과 동일 할 수 있으며 블록 및 지역의 기존 서버 측 렌더링은 웹 페이지 세그먼트 렌더링 아래 아래에 제공됩니다.

먼저 전통적인 렌더링 방법을 살펴 보겠습니다.

 const http = require ( "http"); const fs = require ( "fs"); var tpl1 = '<! doctype html> <html> <head> <title> 테스트 </title> </head> <bod> helloword <p> $ data1 </p>'; var tpl2 = <p> $ data2 </p> </ht>> </ht>>. html = ''; var server = http.createserver ((req, res) => {if (req.url! == "/favicon.ico") {res.writehead (200, { 'content-type': 'text/html'}); getDataOne ((data1) => {getDatwo) res.end (tpl1.replace (// $ data1/g, data1) + tpl2. }}); }}). 듣기 (3000, '127.0.0.1'); 함수 getDataone (fn) {settimeout (() => { FN ( '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 추 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 FN ( '222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222

위에서 우리는 http://127.0.0.1:3000을 방문하여 페이지를 반환 할 간단한 예제를 제공합니다. 페이지를 렌더링 할 때는 5 초가 걸리는 2 개의 작업이 있습니다. IO 또는 데이터 풀로 가정 할 수 있습니다. 현재 반환 페이지를 관찰하는 시간은 10 초입니다. 즉, 사용자가 페이지를 보는 데 10 초가 걸립니다.

다음으로 백엔드 렌더링 방법을 변환하여 세그먼트 렌더링으로 변경합니다.

 const http = require ( "http"); const fs = require ( "fs"); var server = http.createserver ((req, res) => {if (req.url! == "/favicon.ico") {res.writehead (200, { 'content-type': 'text/html', ''transfer-ENCHED ':' ': }); gettaone ((data1) => {res.write ( '<! doctype html> <html> <head> <title> 테스트 렌더 </title> </head> <body> helloword <p> $ data1 </p>'. 교체 (// $ data1/g, data1); getDatatwo ((data2) => ^ res.end ( '<p> $ data2 </p> </body> </html>'. }); }); }); }); }); }); }). 듣기 (3000, '127.0.0.1'); 함수 getDataone (fn1) {settimeout (() => { fn1 ( '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지는 FN1입니다 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111는지까지 FN2 ('2222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222

HTTP 헤더를 설정함으로써 : 전송 인코딩 : 청크, 세그먼트 화 된 변속기의 마법이 활성화됩니다. 이 인코딩 방법은 HTTP1.1에 존재합니다. 일반적으로 서버가 HTTP 응답을 생성 할 때 정보 크기를 결정할 수 없습니다. 현재 컨텐츠 길이로 길이를 미리 작성할 수 없으며 메시지 길이를 실시간으로 생성해야합니다. 서버는 일반적으로 청크 인코딩을 사용합니다.

청크 인코딩 전송을 수행 할 때 회신 메시지의 헤드에 전송 코딩이 있으며 청크로 정의되므로 내용이 청크 인코딩을 사용하여 전송 될 것임을 나타냅니다. 수정 된 효과를 살펴 보겠습니다.

전체 페이지 전송 시간이 변경되지는 않았지만 이러한 방식으로 응답 시간을 반으로 줄여 사용자의 대기 시간이 줄어 듭니다. 특정 비즈니스에서는 사용자가 먼저 볼 필요가 있다고 말할 수 있으며 백엔드는 백엔드의 장기 부분을 출력으로 처리한다고 말할 수 있습니다. 이는 세그먼트 화 된 전송 렌더링의 장점입니다. 서버가 nginx 인 경우 버퍼 설정으로 인해 세그먼트 렌더링이 유효하지 않을 수 있고 버퍼 크기를 조정해야 할 수도 있습니다.