SSR 앱에서 “Text Content Did Not Match” 경고 수정하는 방법
React, Express, Apollo를 사용하여 서버 사이드 렌더링(SSR) 애플리케이션을 개발하는 경우 다음과 같은 오류 메시지가 표시될 수 있습니다:
경고: 텍스트 내용이 일치하지 않습니다. 서버: "일부 데이터" 클라이언트: "로딩 중..."이 오류는 일반적으로 서버 렌더링된 콘텐츠와 클라이언트 측에서 렌더링된 콘텐츠 간의 불일치로 발생합니다. 이는 SSR 앱에서 흔한 문제이며 쉽게 해결할 수 있습니다. 이 문서에서는 이 경고를 해결하고 적절한 콘텐츠 수화를 보장하는 방법을 안내합니다.
문제: 서버와 클라이언트 사이의 데이터 불일치
SSR 앱을 처음로드할 때 콘텐츠가 서버 측에서 렌더링되고 클라이언트로 전송됩니다. 그러나 클라이언트 번들이 로드될 때 데이터를 다시 가져오려고 시도하여 불일치 경고가 발생할 수 있습니다. 이 오류는 일반적으로 로딩 플래그가 서버에서 “로딩 중…”으로 설정되고 클라이언트에서 “일부 데이터”로 설정되는 등 다른 값으로 설정되어 나타납니다.
이 오류는 초기 데이터를 포함하는 서버 렌더링된 HTML이 클라이언트 측에서 제대로 수화되지 않기 때문에 발생합니다. 이를 해결하기 위해 클라이언트 측에서 앱이 서버 측 값들을 수화하고 초기 로드시 로딩 플래그를 트리거하지 않도록 보장해야 합니다.
해결책: 서버 사이드 렌더링을 위한 쿼리 건너뛰기
React Apollo는 서버 사이드 렌더링을 위해 명시적으로 컴포넌트를 표시하는 메커니즘을 제공합니다. Query 컴포넌트에서 ssr prop을 false로 설정함으로써 서버 사이드 렌더링 중 쿼리를 건너뛰고 클라이언트에서 독립적으로 데이터를 로드할 수 있습니다.
이 해결책을 구현하려면 다음 단계를 따르세요:
단계 1: 클라이언트 측 코드 업데이트하기
// client.js
const httpLink = createHttpLink({
uri: "http://10.10.10.139:4000/"
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
});
ReactDOM.hydrate(
<ApolloProvider client={client}>
<BrowserRouter>
<div>{renderRoutes(RoutesList)}</div>
</BrowserRouter>
</ApolloProvider>,
document.getElementById("root")
);단계 2: Query 컴포넌트 수정하기
// index.js
<Query query={GET_USERS} ssr={false} variables={queryVariables}>
{({
loading,
error,
data
}) => {
if (loading) return <p>로딩 중...</p>;
if (error) return `에러: ${error}`;
return data.users.map(user => <p key={user.id}>{user.login}</p>);
}}
</Query>Query 컴포넌트에서 ssr={false}으로 설정하면 데이터가 서버 사이드 렌더링 중 로드되지 않으므로 서버와 클라이언트 콘텐츠의 불일치가 방지됩니다.
결론
서버 사이드 렌더링은 React 애플리케이션의 성능과 검색 엔진 최적화를 개선하기 위한 강력한 기술입니다. 그러나 서버에서 클라이언트로의 전환 과정에서 데이터 수화를 처리하는 것은 까다롭고 “경고: 텍스트 내용이 일치하지 않습니다.”와 같은 경고 메시지가 나타날 수 있습니다. 위에서 제공한 해결책을 사용하여 서버 사이드 렌더링 중 쿼리를 건너뛰고 이러한 오류를 피할 수 있습니다.
이 해결책을 효과적으로 구현하려면 클라이언트 측 코드를 업데이트하고 Query 컴포넌트를 수정해야 합니다. 적절한 데이터 수화를 통해 SSR 앱은 불일치 경고 없이 원활한 사용자 경험을 제공할 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
