본문으로 이동
환경 고민없이 개발하기
문서

환경 고민없이 개발하기

김동현 토스 · 토스 기술 블로그

원문 보기

AI 핵심 요약

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`의 동작 범위를 확인해야 합니다.

소개

서버 사이드 렌더링 작동 방식과 Isomorphic에 대해 소개드려요.

비슷한 학습 자료

컨퍼런스 당근 밋업

JavaScript 생태계를 이용해서 신사업 제품의 서버 개발하기 | 당근 SERVER 밋업 2회

컨퍼런스 당근 밋업

당근의 성장과 함께 프로덕트를 만드는 과정에서 겪은 다양한 경험을 공유해요. 🥕 JavaScript 생태계를 이용해서 신사업 제품의 서버 개발하기 (김경덕/버티컬 사업실) #javascript #nodejs 🥕 당근 공고 살펴보기 : https://about.daangn.com/jobs/ 🥕 발표 자료 : https://daangn.notion.site/SERVER-5599a1755889426bafd4e87a0562e0b6 * 당근 Server 밋업 1회 다시보기 : https://youtube.com/playlist?list=PLaHcMRg2hoBr5s_jn5CzZrpkmHOY0N8w7&si=VRdpYyoT0bjZ3VOW

백엔드 프로그래밍 언어

컨퍼런스 DEVIEW 2023

SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략

컨퍼런스 DEVIEW 2023

[DEVIEW 2023] * 발표자 : 박찬진(쿠팡) * 발표제목 : SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략 * DEVIEW 2023 바로가기: https://deview.kr/2023 #DEVIEW #DEVIEW2023 #데뷰 #데뷰2023

웹 개발 프론트엔드

문서 이다용

App Router의 장점은 우리에게도 장점일까요?

문서 이다용

App Router가 토스뱅크에도 좋은 선택일지, 직접 측정한 결과와 도입 여부를 판단한 기준을 공유해요.

프론트엔드

문서 정진우/문현경

SSR 서버 최적화로 비용 아끼기

문서 정진우/문현경

오늘은 SSR 아키텍처 운영을 위해 반드시 알아두어야 할, SSR 서버의 최적화와 관련된 이야기를 해보려 합니다. 최적화를 통해 토스는 서비스 운영에 필요한 SSR 서버의 수를 절감하여 비용을 개선할 수 있었습니다.

프론트엔드 데브옵스 · 인프라

문서 한재엽

조금만 신경써서 초기 렌더링 빠르게 하기 (feat. JAM Stack)

문서 한재엽

SPA(Single Page Application) 구조로 웹 프론트엔드 애플리케이션이 개발되면서 초기 렌더링 속도는 프런트엔드 개발자에게 중요한 과제 중 하나가 되었습니다. 사용자 경험에 영향을 줄 수 있는 가장 큰 요소 중 하나가 바로 속도이기 때문입니다.

웹 개발 프론트엔드

책 이정환 예스24

한 입 크기로 잘라 먹는 Next.js

책 이정환 예스24

페이지 라우터부터 앱 라우터까지 처음 시작하기 딱 좋은 Next.js 입문서 『한 입 크기로 잘라 먹는 Next.js』는 현존 최고 메타프레임워크인 Next.js 입문서이다. Next.js의 핵심 개념을 쉬운 용어와 도해로 풀고 코드 해설도 독자 눈높이에 맞게 상세히 달고 있어 입문자에게 안성맞춤인 책이다. 특히 Next.js의 두 라우터 버전(페이지 라우터, 앱 라우터) 중 하나를 선택해 소개하는 게 아니라 두 버전을 발전 순서에 따라 설명함으로써, Next.js에서 라우팅 개념이 어떤 과정을 거쳐 발전했는지 깊이 이해할 수 있게 한다. 또한 이 책은 SSR, SSG, ISR 비교, 서버 컴포넌트, 네비게이팅과 프리페칭, 캐시, 스트리밍, 서버 액션, 고급 라우터와 같은 Next.js의 핵심 기능들을 프런트엔드와 백엔드를 넘나드는 프로젝트를 직접 구현하며 익힐 수 있어 개발의 즐거움까지 더해 준다.

웹 개발 프론트엔드