javascript - 프런트엔드 렌더링이란 무엇입니까? 서버사이드 렌더링이란 무엇입니까? 두 가지와 해당 응용 프로그램 시나리오의 차이점은 무엇입니까?

Question

이제 프레임워크를 사용하여 프런트 엔드에서 SPA를 작성한 다음 백그라운드에서 데이터베이스 관련 데이터를 처리하고 이러한 렌더링 전후에 Restful API를 통해 데이터를 전달합니다.
소위 서버사이드 렌더링이란 백그라운드에서 HTML 파일을 생성하여 프런트엔드에 전달하는 것을 말하며, 가상 DOM을 도입한 반응과 Vue는 어떻습니까?
프런트 엔드 렌더링이란 무엇을 의미합니까? HTML을 구문 분석하여 DOM 트리를 생성한 다음 페이지를 그립니다.
프런트엔드 렌더링과 클라이언트사이드 렌더링은 같은 의미겠죠?
프런트엔드 렌더링과 서버사이드 렌더링의 적용 시나리오는 무엇입니까?

Answer 1

몇 마디로 명확하게 설명하기는 어렵습니다. 아래 링크를 참조하세요.
프런트엔드 렌더링과 백엔드 렌더링
백엔드 렌더링 html, 프런트엔드 템플릿 렌더링 html, jquery의 차이점은 무엇인가요? HTML?
프런트엔드 렌더링과 백엔드 렌더링 간의 논쟁을 집중적으로 읽어보세요

Answer 2

첫 번째 렌더링에서는 data 및 template만 html로 조합해야 합니다.

프런트엔드와 백엔드 분리 및 SPA의 경우 중요한 경로에서 인증을 통해 요청을 리디렉션하는 것 외에도 백엔드의 일반 라우팅 로직을 프런트엔드와 프런트엔드에서 공유합니다. 처리 로직의 일부는 프런트엔드와 백엔드에서 공유됩니다. 엔드는 데이터 인터페이스를 제공하고 인터페이스와 관련된 데이터 처리 로직은 백엔드에 고유합니다.

SPA 시나리오에서
서버 측 렌더링은 첫 번째 가져오기 요청을 위한 것이며 브라우저에 완전한 HTML을 생성하는 데 사용되며 브라우저는 첫 번째 화면을 직접 표시합니다.
클라이언트 측 렌더링은 클라이언트 상태 변경, 데이터 요청 및 로컬 DOM 변경에 관한 것입니다(로컬 영역은 전체 본문만큼 클 수 있음).
react/vue 이 시나리오에서 서버는 jsx/template을 html로 변환만 하고 클라이언트는 props/state 변경에 따라 가상 DOM과 실제 DOM 간의 동기화를 조정합니다.

전통적인 프런트엔드와 백엔드 분리 시나리오에서
백엔드는 전체 HTML 렌더링을 담당하고, 프런트엔드 js는 상호작용 후 몇 가지 텍스트 애니메이션 등의 변경을 담당합니다. 프런트 엔드 렌더링이 없습니다.

리뷰:

1. 가상 DOM은 프런트 엔드에만 존재하며 가상 DOM과 실제 DOM의 차이를 조정하고 실제 DOM에 대한 업데이트를 최소화하는 데 사용됩니다.

2. 프런트엔드 렌더링은 데이터와 템플릿을 구문 분석하고 DOM을 생성하는 것을 말합니다. 백엔드와 동일합니다.

3. 네, 웹 시나리오에서도 같은 의미입니다.

4. 프런트 엔드 렌더링: 작은 변화가 있을 때마다 전체 DOM 장면을 재생성하도록 서버에 요청하고 싶지 않습니다. 서버 측 렌더링: 대부분의 시나리오에서 극단적인 시나리오는 클라이언트 측에서 js가 비활성화된 경우입니다. 프런트엔드 렌더링만 사용하는 시나리오의 경우 회사 구조상 React/Vue 렌더링을 허용하지 않는 것으로 추정됩니다(노드 서버가 아직 배포되지 않음). 일반적으로 프런트엔드 렌더링과 백엔드 렌더링이 모두 있습니다.

Answer 3

IT 업계의 나쁜 습관은 구체적인 내용을 모르도록 화려한 용어를 만드는 것입니다.

백엔드 렌더링: 백엔드 프로그램은 HTML 페이지를 프런트엔드로 내보내기 전에 먼저 HTML 페이지의 특정 영역과 특정 기호를 데이터로 채운 다음 이를 프런트엔드에 던집니다. 백엔드 렌더링, 당신은 변형된 표현으로 이해될 수 있습니다. 렌더링이라는 단어는 원래 게임 분야에서 유래되었으며, 게임 분야는 실제 그림을 그리는 것에서 유래되었습니다. . 과거에는 대부분의 서버가 이 모드였습니다

프런트엔드 렌더링: 백엔드 HTML 페이지는 정적 파일로 존재합니다. 프런트엔드에서 요청하면 백엔드는 파일의 내용을 수정하지 않고 프런트엔드에 직접 반환합니다. 프런트 엔드는 페이지를 가져온 후 html 페이지에 작성된 내용에 따라 페이지를 렌더링하여 html의 내용을 수정(채색)합니다. 프론트엔드 렌더링입니다