React Snapshot으로 모든 컨텐츠를 렌더링하는 방법은 무엇입니까?

Question

저는 React와 새로운 블로그를 만들려고합니다. SEO 이유로 저는 반응 라우터, 반응 헬멧, 반응 스냅 샷 및 정적 서버을 사용하여 Snapshot이 코드를 렌더링하는 방법을 확인합니다. 스냅 샷은 페이지를 렌더링하고 소스 코드를 볼 때 문제가 발생합니다. 스냅 샷은 미리로드 된 코드 만 렌더링합니다. 다음 코드에서 볼 수 있듯이 게시물 목록이로드 될 때까지로드 텍스트를 표시합니다.

render() { 
if (this.state.loaded) { 
    let posts = this.state.posts; 

    return (
    <div> 
     {posts.map((post) => { 
     return (
      <div key={post.slug}> 
      <Link to={`/post/${post.slug}`}>{post.title}</Link> 
      </div> 
     ) 
     })} 
    </div> 
); 
} else { 
    return (
    <div> 
     Loading... 
    </div> 
) 
} 

이 사용자가 볼 것입니다 : This is what te users see

이 구글이 보는 것입니다 : 모든 내용을 렌더링 할 수있는 솔루션은

<div data-reactid="4"> 
    <div data-reactid="5">Loading...</div> 
</div> 

있습니까? 나는에 문제를 여는 권하고 싶습니다

감사합니다,

Answer 1

스냅 샷을-I는 반작용 막연하게되므로 귀하의 게시물을 캡처 할 수 있도록 스냅 샷을 찍을 때 더 이상 시간 제한을 허용 논의가 있었다 기억한다. https://github.com/geelen/react-snapshot/issues