서버사이드 렌더링 예제

앞서 말했듯이 서버 측 렌더링은 처음에는 모든 페이지가 서버에서 렌더링되고 로드된다는 것을 의미합니다. 그러나 서버 측(범용) 반응의 도입으로 상황은 약간 다릅니다. 클라이언트 쪽 렌더링에서 브라우저는 최소 HTML 페이지를 다운로드합니다. 자바 스크립트를 렌더링하고 그것으로 콘텐츠를 채웁니다. 가장 중요한 것은 노드 서버를 계속 가동하고 실행해야 하기 때문에 SSR React 앱은 리소스 측면에서 훨씬 더 많은 비용이 든다는 것입니다. React 응용 프로그램에 대한 서버 측 렌더링을 선택하려는 경우 서버없는 경로를 선택하는 것이 더 나을 수 있습니다. 이것이 서버 측 렌더링을 탐구한 가장 큰 이유였습니다. 특히 방문 페이지, 블로그 등과 같은 초석 페이지일 때. 반면 서버 쪽 렌더링은 React 구성 요소를 서버에서 렌더링합니다.

출력은 HTML 콘텐츠입니다. 이것이 React에 대한 서버 측 렌더링이 들어오는 곳입니다. App.js는 💅 이모티콘을 래핑하는 div를 반환합니다. 브라우저에 렌더링할 매우 기본적인 React 구성 요소입니다. 현재 상태에서 응용 프로그램을 실행 하는 경우 화면에 시작 메시지를 알 수 있습니다., 그리고 실제 환영 메시지 없이 index.html 파일의 내용을 볼 것 이다 소스를 보고. 이 문제를 해결하려면 서버 측 렌더링을 추가해 보겠습니다. 첫째, 우리는 3 packages를 추가 해야합니다 : 느린 장치에서, 초기 페이지를 렌더링하는 것은 시간이 오래 걸릴 수 있으며 성능저하 된 환경으로 이어질 수 있습니다. 계산을 더 강력한 서버로 오프로드하면 사용자가 기다리는 시간을 최소화하고 전환율이 저하되지 않도록 할 수 있습니다.

그리고 그게 다야! 서버 측 렌더링을 구현하기 위해 해야 할 일입니다. 이 기사에서는 SSR React, 사용 이유 및 서버 측에서 React를 렌더링하기 위한 몇 가지 인기 있는 프레임워크를 소개합니다. 나는 또한 SSR 반응이 이해가되지 않는 경우 를 해결하고 싶습니다. 이 문서는 이미 클라이언트 측에서 React로 작업중인 개발자를 대상으로 합니다. Redux를 서버 렌더링과 함께 사용할 때는 클라이언트가 초기 상태로 사용할 수 있도록 앱의 상태를 응답에 따라 보내야 합니다. HTML을 생성하기 전에 데이터를 미리 로드하는 경우 클라이언트가 이 데이터에 액세스할 수도 있기 때문에 이는 중요합니다. 그렇지 않으면 클라이언트에서 생성된 태그가 서버 태그와 일치하지 않으며 클라이언트가 데이터를 다시 로드해야 합니다. React 앱에 대한 서버 측 렌더링을 탐색하고 다음 제품에 사용하여 이러한 이점을 확인할 수 있도록 하는 것이 좋습니다. index.js는 REACT 응용 프로그램을 DOM에 탑재하는 표준 방법입니다. App.js 구성 요소를 꺼내 렌더링합니다. 약속 및 썽크와 같은 비동기 원시와 Redux에서 비동기 흐름을 표현하는 방법에 대해 자세히 알아보려면 비동기 작업을 읽을 수 있습니다.

학습한 모든 것이 범용 렌더링에도 적용될 수 있습니다. 아래 예제에서는 React를 사용하지만 서버에서 렌더링할 수 있는 다른 뷰 프레임워크와 동일한 기술을 사용할 수 있습니다. 서버 측 렌더링의 가장 일반적인 문제는 비동기적으로 제공되는 상태를 처리하는 것입니다. 서버에서 렌더링하는 것은 본질적으로 동기식이므로 모든 비동기 반입을 동기 작업에 매핑해야 합니다. 서버 측 렌더링(SSR)은 서버에서 일반적으로 클라이언트 측만 단일 페이지 앱(SPA)을 렌더링한 다음 완전히 렌더링된 페이지를 클라이언트로 보내는 데 널리 적용된 기술입니다. 그러면 클라이언트의 자바스크립트 번들이 인수될 수 있으며 SPA는 정상적으로 작동할 수 있습니다. SSR을 사용하는 한 가지 주요 이점은 JavaScript 코드를 실행하지 않는 크롤러의 경우에도 콘텐츠에 대해 크롤링할 수 있는 앱을 사용하는 것입니다. 이것은 SEO와 소셜 미디어 채널에 메타 데이터를 제공하는 데 도움이 될 수 있습니다. SSR은 첫 번째 요청시 서버에서 완전히 로드된 앱이 다운되므로 성능에 도움이 될 수 있습니다. 하지만 사소한 애플 리 케이 션에 대 한, SSR 조금 복잡 하 게 얻을 수 있는 설정 이 필요 하 고 서버에 더 큰 부하를 생성 하기 때문에 마일리지 다를 수 있습니다.