환경 고민없이 개발하기

SSR은 서버가 HTML을 먼저 만들어 전달해 초기 로딩과 SEO에 이점을 주지만, 브라우저 전용 객체를 사용하는 코드가 서버에서 실행되면 `location is not defined` 같은 오류가 발생할 수 있습니다. 서버에서 해당 접근을 막는 것만으로는 서버와 클라이언트의 렌더링 결과가 달라져 Hydration Mismatch가 생길 수 있으므로, 두 환경에서 같은 값을 얻도록 해야 합니다. 글은 Next.js의 `useRouter()`를 사용해 쿼리 파라미터를 양쪽에서 일관되게 읽는 방법을 설명하고, 이런 코드를 isomorphic하다고 소개합니다. 환경별 처리를 추상화하면 SSR의 차이를 직접 다루는 부담을 줄이고 구현에 집중할 수 있다는 점을 강조합니다.

• SSR에서는 브라우저 전용 객체인 `window`나 `location`에 서버 렌더링 단계에서 접근하지 않도록 주의해야 합니다.
• Hydration이 성공하려면 서버가 만든 HTML과 클라이언트의 첫 렌더링 결과가 일치해야 합니다.
• 쿼리 파라미터처럼 서버와 클라이언트 양쪽에서 필요한 값은 Next.js의 `useRouter()`처럼 환경 차이를 추상화한 API를 활용할 수 있습니다.
• SSR에서 비동기 UI를 다룰 때는 React 버전에 따른 `Suspense`의 동작 범위를 확인해야 합니다.