React/Redux 동형/서버 측 렌더링 및 미디어 쿼리

Question

Node를 기반으로 한 Isomorphic React/Redux 앱을 만들기 시작했습니다. 이 프로젝트의 요구 사항 중 하나는 "모바일"및 "데스크톱"뷰를 기반으로 특정 구성 요소를 "적응 형"렌더링하는 것입니다. 필자는 Redux 액션과 감속기를 구현하여 상태에서 미디어 쿼리 ("작은", "중간", "큰")에 기반한 사용자보기에 대한 화면 정보를 저장합니다. 크기를 변경하면 상태/저장소가 업데이트됩니다. 기본 상태는 "작음"입니다. 화면 크기에 따라 두 가지 다른 버전에서 "적응"렌더링해야하는 구성 요소에서

const defaultState = { 
    isMobile: true, 
    isTablet: false, 
    isDesktop: false, 
    sizes: { 
     small: true, 
     medium: false, 
     large: false, 
     huge: false, 
    }, 
}; 

, 나는 단순히 수행

경우 (작은) 반환 variation1의

경우 (중간) return variation2

모두 작동합니다.

1. 내 애플 즉, 마크 업 서버 측 또한 렌더링 의미 동형 :

   는 지금은 두 가지 문제에 직면하고있다. 서버는 사용자의 브라우저 및 미디어 쿼리에 대해 아무것도 모릅니다. 따라서 내 기본 상태가 "작음"이므로 서버는 항상 "variation1"을 렌더링합니다. node-server는 사이트의 시작점입니다. 렌더링이 "지연"(미들웨어?)해야하고 React 앱이 "전달"되기 전에 서버가 클라이언트의 브라우저 너비에 대한 정보를 클라이언트에서 가져와야합니다. 어떻게하면이 문제를 해결할 수 있을까요?

2. 렌더링이 상태를 기반으로하기 때문에 브라우저 크기가 "데스크톱"인 경우에도 "변동 1"로드를 항상 몇 밀리 초 (깜박임) 동안 볼 수 있습니다. 이것은 현재 화면 너비로 상태가 업데이트되기 전에 JS 검색에 몇 밀리 초가 걸리기 때문입니다. 나는 이것이 위의 문제와 기본 상태와 함께하는 것 같아요.

1에 대한 해결책을 찾지 못했습니다. 그러나 뭔가가 동형이고 반응 형/적응 형이어야합니다.

Answer 1

당신은 서버의 헤더에서 사용자 에이전트를 얻은 다음 데이터를 반환하는 감속기와 함께 사용자 에이전트 정보를 사용하여 감속 조치를 전달할 수 있습니다.이 방법으로 휴대 전화/태블릿/데스크탑/등의 사용자를 감지하고 그에 따라 렌더링 할 수 있습니다.

Answer 2

매우 어려운 문제는 내 의견으로는 "많이 달라집니다"기반 솔루션을 해결할 수 있습니다. :)

나는 응답 가능한 구성 요소를 돕는 두 개의 라이브러리와 react-sizeme 및 의 작성자이며 질문에서 설명하는 것과 유사한 문제가 발생했습니다. 내 경험에 비추어 볼 때 문제 중 하나에 대한 해결 방법이 다른 문제에 영향을 미치는 경우가 많습니다. 기본 상태로 인해 렌더링의 깜박임 뭔가 내가

했다 : 나는 시도했다

내가 아래에있는 내 경험을 설명함으로써 여기에 무슨 뜻인지 자세히는 ... 먼저 "문제 2"를 해결하는 것 라이브러리를 처음 작성하는 동안 경험했습니다. react-sizeme은 컴포넌트에서 사용 가능한 크기를 얻은 다음 컴포넌트로 전달하는 상위 컴포넌트입니다. 크기에 따라 물론 예제에서와 같이 다른 구성 요소를 렌더링하도록 선택할 수 있으므로 기본 상태 인 Sweet Spot이 발생하지 않는 한 업데이트 깜박임이 발생할 수 있습니다. 나는 너비/높이를 얻기 위해 빈 자리 표시자를 처음으로 렌더링하도록 react-sizeme을 변경 한 다음 구성 요소를 렌더링하여 "적절한"너비/높이를 지정함으로써이를 "정복했습니다". 이것은 나를 위해 매우 효과적입니다.더 이상 ComponentBob이 렌더링되는 것을 보지 않고, 단지 마운트 해제하고 ComponentFoo를 즉시 렌더링합니다.

그런 다음 "문제 1"... 함께 온

react-sizeme은 인기를 얻기 시작했고, 결국 내가 서버 측 렌더링 문맥에서 사용하고 싶다고 라이브러리의 소비자했다. 그러나 문제 1에 대한 수정으로 인해 서버 측 렌더링에서 많은 빈 콘텐츠 (예 : 내가 말하고 있던 자리 표시 자)가 생성됩니다. 페이로드가 브라우저에 전달 된 후 자리 표시 자 로직이 시작되고 결과적으로 크기 데이터가 구성 요소로 전송되어 렌더링됩니다. 당신이 기본적으로 SSR을하는 것의 이점을 근본적으로 무효로 할 때 이것은 이상적이지 않습니다. 이 사용자와 함께 작업했으며 react-sizeme을 "SSR 모드"에서 실행되도록 구성하는 것이 최선의 방법이라고 판단했습니다. 기본적으로 이것은 자리 표시 자 렌더링을 삭제하고 기본 구성 요소를 렌더링하여 초기 서버 응답에서 빈 페이지를 얻지 못하게하지만 구성 요소 깜박임 문제가 다시 발생하기 쉽습니다.

aaaaaaaaaah! 여기서 영향의 톱을 보아라! :(

그래서 기본적으로 해결 한 문제는 직접 다른 영향을 미친다.

---

나는이 어떤 생각을 계속했고 나는이 일을 아마 가장 좋은 방법은 시도하고 사용자를 얻는 것입니다 믿습니다 첫 번째 요청시 브라우저 너비/높이를 지정해야합니다.이 정보는 기본적으로이 정보를 알아 내고 사용자의 초기 요청을 렌더링 할 의도로 서버에 다시 게시하는 간단한 유틸리티를 렌더링하는 것을 의미합니다. 그런 다음 너비/높이를 사용하여 전달할 수 있습니다 사용중인 높이/너비가 각 구성 요소에 대해 결정하는 것을 계속하기 위해 전체 구성 요소 트리를 통해 (수학을 수행함). 매우 까다로울뿐 아니라 가능할 수도 있습니다.

물론 다른 문제는 Google이 초기 요청에 대해 빈 페이지를 색인하기 만한다는 것입니다 (예 : 초기 너비/높이를 벗어난 물고기의 빈 렌더링). 당신은 구글이 올바른 렌더링 된 결과물을 따라갈 수 있도록 리디렉션 등의 영리한 HTTP 응답 코드를 사용하려고 노력해야합니다.

---

죄송합니다, 당신이 찾고 있던 해답이 될 수 없습니다, 그러나 희망 내 경험은 어떤 방식으로 도움이 영감의 일종을 제공합니다. 흥미로운 실험을 생각해 내면 계속 게시 해주십시오. 나는 당신과 함께이 일을하게되어 기쁩니다.