React 및 GraphQL - 09를 사용하여 Reddit 클론 만들기

이제 SSR(Server-Side Rendering)을 설정합니다. 그렇게 하려면 Web App 프로젝트에 아래 패키지를 추가하십시오.

yarn add next-urql react-is urql

이제 코드를 약간 리팩토링하고 SSR을 urqlClient  에 추가합니다. 몇 가지 도우미 함수를 만들고 이러한 것들을 이동해 보겠습니다.

다음 단계는 인덱스 페이지에서 이 withUrqlClient 함수를 사용하여 urqlClient 를 제공하는 것입니다. Index.tsx 파일로 이동하여 변경해 보겠습니다.

export default withUrqlClient(createUrqlClient)(Index);

이제 이 오류가 발생합니다.

Types of property 'credentials' are incompatible.
Type 'string' is not assignable to type '"include" | "omit" | "same-origin" | undefined'.

이 문제를 수정하려면 as const를 credentials에 추가하세요. 읽기 전용 속성이 필요하기 때문입니다.

fetchOptions: {
credentials: "include" as const,
},

기본적으로 이것은 SSR이 아닙니다. ssr: true 를 추가하여 활성화해야 합니다.
이제 Post 쿼리를 추가합니다.

query Posts {
  posts {
    id
    createdAt
    updatedAt
    title
  }
}

일단 추가하고 나면 먼저 SSR 없이 시도합니다. 이를 수행하려면 먼저 Posts 데이터를 가져와 Index.tsx 페이지에 표시하십시오.

데이터를 얻으면 먼저 코드 블록 아래에서 데이터가 있는지 확인합니다.

{
  !data ? ( // check that data is null or not
    <div>Loading...</div>
  ) : (
    data.posts.map((p) => {
      return <div key={p.id}>{p.title}</div>;
    })
  );
}

SSR 없이 기능을 시연하기 위해 먼저 서버에 절전 기능을 만들고 느린 로딩을 보여줍니다. 데이터를 로드하는 데 3초가 걸립니다. 그러나 페이지의 소스를 확인하면 소스에 div가 로드되는 것을 볼 수 있습니다.

이제 아래 코드를 추가하여 SSR을 활성화해 보겠습니다.

export default withUrqlClient(createUrqlClient, { ssr: true })(Index);

As a rule of thumb, use SSR for dynamic data loading. Also check that you are using urlq queries and mutations in there.

이제 로그인 페이지를 래핑하고 SSR을 사용하지 않도록 페이지를 withUrqlClient 등록해 보겠습니다.

// login page
export default withUrqlClient(createUrqlClient)(Login);

// register page
export default withUrqlClient(createUrqlClient)(Register);

이제 우리는 NavBar . 서버에서 렌더링하는 동안 데이터는 null이므로 서버에서 실행하고 싶지 않습니다. 쿠키를 여기에 전달하지 않기 때문입니다.

먼저 NavBar에 pause: true를 추가합니다. true 개체를 사용하여 이 false 또는 window를 정의합니다.

// inside useMeQuery define SSR pause
const [{ data, fetching }] = useMeQuery({
  pause: isServer(),
});

// isServer.ts file
export const isServer = () => typeof window === "undefined";

서버에서는 undefined 입니다. 따라서 서버 내부에서 이 돌연변이를 처리하지 않습니다.

이상으로 이번 포스팅을 마치겠습니다. 이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.
오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다.

참조:

이 기사 시리즈는 . 이것은 놀라운 튜토리얼이며 확인하는 것이 좋습니다.

기본 이미지credit