서버 측 렌더링으로 대용량 콘텐츠 및 중복에 대응

ReactJS 단일 벗겨진 페이지 응용 프로그램

1. 서버 측 렌더링 (SSR) 없음, 문제 재현 요구 사항 : SSR없이 aspnet 코어 React 프로젝트에
   ReactJS + WebPack + React-Router
   Yeoman 생성기를 사용하고 Startup.cs에서 HotReloading을 비활성화했습니다 (또는 프로덕션 모드를 실행할 수 있음).

   <Route component={ Layout }>
      <Route path='/' components={{ body: Home }} />
      <Route path='/counter' components={{ body: Counter }} />      
   </Route>;
   /* project includes Home.tsx, Counter.tsx and other components/subpages */
   

   Home.tsx의 일부 :

   class Home extends React.Component<any, void> {
     public render() {
       return <div>
           <h1>Hello, world!</h1>
           <p>Welcome to your new single-page application, built with:</p>
   

   결과

   • main-client.js홈 및 카운터 구성 요소 (하위 페이지)에 대한 모든 콘텐츠 / 레이아웃과 다른 하위 페이지에 대한 모든 콘텐츠 및 레이아웃이 포함됩니다.
     즉 , 하나의 하위 범주 만 요청 했더라도 응용 프로그램 의 전체 레이아웃을 로드하고 있음을 의미합니다 . 예 : Counter
     웹 사이트를 중지 한 후에도 webpacked를 통해로드되는 하위 페이지간에 전환 할 수 있습니다 main-client.js.

     

     질문 1 : 현재 페이지 (애플리케이션 셸 + 현재 하위 범주)에 대해 요청한 것만로드 할 수 있습니까?
     (그런 다음 다른 섹션의 경우 캐시 된 앱 셸로 인해 하나의 새 하위 범주 만 제공됨)
     (아마도 다른 라우터 및 특수 (웹) 팩 설정 사용)

2. 서버 측 렌더링 (SSR), 문제 재현 요구 사항 : Redux 및 SSR 과 함께 aspnet 코어 React 프로젝트에
   ReactJS + WebPack + React-Router + SSR
   Yeoman 생성기를 사용하고 Startup.cs에서 HotReloading을 비활성화했습니다 (또는 프로덕션 모드를 실행할 수 있음).

   결과

   • 이제는 전체 웹 사이트 레이아웃을 두 번로드하므로 더 나빠집니다. 처음에는 완전히 렌더링 된 html에서 다음으로 main-client.js

   이것은 React의 경우 기본적으로 정적 콘텐츠 (컨트롤 내부의 정적 텍스트)와 동적 콘텐츠 (일부 조건부 HTML 출력)간에 차이가 없으므로 모든 정보를 거대한 JS 파일에 넣습니다.

   질문 2 : 정적 부분에 대한 React에 대한 힌트를 줄 수 있으므로 서버에서 한 번만 렌더링하고 동적 계산 / 구성 요소 만 남기고 클라이언트 자바 스크립트에서 제거하면 되나요?

================================================ ======

그것은 솔기 하지 이러한 문제는 내부에 많은 샘플 그리고 그들은이 자습서에 언급되지 않기 때문에 많은 사람들이 그것을 알고 있습니다.

요즘 일반적인 접근 방식 중 하나는 처음에는 빈 애플리케이션 셸 레이아웃을로드 한 다음 클라이언트 자바 스크립트를 통해 콘텐츠에 대한 JSON 데이터를로드하는 것입니다. 그러나 이러한 문제는 해결되지 않습니다. 예를 들어 첫 번째 문제의 경우 여전히 구멍 앱용 셸을로드하고 있으며 풍부한 레이아웃의 경우 빈 DOM 요소가 많은 정말 거대한 JS 파일이 될 수 있습니다.

<h1 id="react-hint-for-element-9997">/* here will be header*/</h1>
    <h2 id="react-hint-for-element-9998">/* here will be subheader*/</h2>
        /*and so on and on */