모든 태그
태그

SSR 기술 블로그 글

SSR 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.

전체 53최신 20개 표시
홈에서 필터

최신 게시글

20개 표시

기타

Agent Development Kit 및 A2A 활용 방법 등 6월 넷째 주 Google for Developers 위클리 업데이트를 지금 확인하세요!

X

#LLM#Flutter#Firebase
200

아키텍처

멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유

React와 Vue를 함께 지원하던 디자인 시스템에서 운영 비용을 줄이기 위해 지원 범위를 재정의했습니다. React는 컴포넌트 운영축으로, Vue는 파운데이션 중심으로 전환한 사례입니다.

#React#Vue.js#Next.js
6500

프론트엔드

쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)

쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 구조, 패키지 전략, LLM 활용 방식을 정리했습니다. 상태 결합도에 따라 Hook과 객체를 분리하고, rollup과 Instructions 체계로 운영성을 높였습니다.

#React#Next.js#SSR
9400

프론트엔드

Product Engineer — iOS 개발자, 프론트엔드에 도전하다

iOS 개발자가 프론트엔드 운영과 고도화에 참여한 경험을 공유했습니다.\nAI와 도구를 활용해 구조를 파악하고 웹뷰, SSR 이슈를 해결한 과정이 핵심입니다.

#iOS#Swift#WebView
16900

AI

해이 돈기브업 - GIGA CHAD 채팅봇 만들기

이직 스트레스로 고민을 털어놓을 GIGACHAD 채팅봇을 만들었습니다.\n비밀 보장, 저비용 운영, Gemini Flash 2.0 선택 이유를 정리했습니다.

#FastAPI#EC2#LLM
7800

프론트엔드

해외 숙소 리스트 성능 개선기 : 반쪽짜리 SSR에서 완벽한 인피니트 스크롤까지

해외 숙소 리스트의 반쪽짜리 SSR을 Hydration 기반으로 개선하고 무한 스크롤 UX를 다듬었습니다. 캐싱과 스크롤 복구, 예외 처리로 LCP와 TBT도 함께 개선했습니다.

#SSR#React#TanStack Query
8100

프론트엔드

Next.js에서 QueryClient를 전역변수로 사용해도 될까요?

Next.js SSR에서 전역 QueryClient를 공유하면 요청 데이터가 누적되어 메모리 누수가 발생했습니다. 요청마다 QueryClient를 분리해 GC가 회수할 수 있도록 개선했습니다.

#Next.js#TanStack Query#SSR
15900

프론트엔드

사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기

Next.js App Router에서 RSC와 TanStack Query prefetch를 결합해 이벤트 상세 페이지의 초기 로딩과 레이아웃 시프트를 개선했습니다. LCP는 약 38% 줄었고, 선택적 적용과 서버 부하 모니터링 전략도 함께 정리했습니다.

#Next.js#RSC#TanStack Query
3100

프론트엔드

텍스트 접근성을 개선했더니 거래액이 올랐습니다.

기기 글자 크기 설정을 반영해 텍스트 접근성을 개선한 사례를 소개했습니다. SSR, SSG, CSR 모두에서 FOUT를 줄이고 거래액과 탐색성 개선까지 확인했습니다.

#React Native#Next.js#CSS
4700

프론트엔드

대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC

모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.

#Module Federation#micro frontend#Next.js
12400

프론트엔드

SEO 주도 개발 실천기: 구글이 인정한 ‘좋은 URL’ 99% 달성 여정

SEO 지표를 개발 목표로 삼아 서버와 클라이언트의 병목을 단계적으로 개선했습니다. 그 결과 원티드 플랫폼의 99% URL을 ‘좋은 URL’로 전환했습니다.

#SEO#Next.js#SSR
9700

프론트엔드

GraphQL 커스텀 디렉티브로 만드는 선언적 지연 로딩

SSR에서 개인화 필드 동기화와 중복 요청 문제를 GraphQL 커스텀 디렉티브로 해결한 사례를 소개했습니다.\n`@lazy`로 필요한 필드만 재조회해 네트워크 비용을 줄이고 개발자 경험을 개선했습니다.

#GraphQL#Apollo Client#Next.js
6500

기타

카카오 AI 앰배서더를 공개 모집합니다.

X

#Kakao#SSR#모니터링
11400

기타

Next.js ISR 전환과 Redis 외부 캐싱 (SSR 지옥 탈출기 시리즈 1)

X

#Next.js#ISR#Redis
15000

기타

Next.js SSR 서버를 위한 모니터링 시스템 구축 (SSR 지옥 탈출기 시리즈 2)

X

#Next.js#SSR#모니터링
5400

프론트엔드

Next.js 개발 중 마주한 Hydration Error와 원인

Next.js SSR 환경에서 Hydration Error가 발생한 원인과 점검 방법을 정리했습니다. dayjs locale 불일치로 서버와 클라이언트 렌더 결과가 달라진 사례를 설명했습니다.

#Next.js#React#SSR
13500

프론트엔드

React Server Component와 Streaming으로 웹 성능 극대화하기: Next.js 실전 가이드

Next.js App Router에서 React Server Components와 Streaming을 활용해 데이터 패칭 패턴을 비교했습니다. loading.tsx와 Suspense, use 훅으로 체감 속도와 로딩 시간을 함께 개선하는 방법을 설명했습니다.

#React#Next.js#SSR
21500

프론트엔드

Next.js 트러블슈팅: CORS와 Version Skew 에러 원인부터 해결까지

Next.js SSR 서비스에서 발생한 CORS와 Version Skew 장애의 원인과 해결 과정을 정리했습니다. SessionStorage 저장, dynamic import, 배포 전략 개선으로 문제를 완화했습니다.

#Next.js#CORS#SSR
13200

프론트엔드

신세계백화점 PC 메인 React 전환기

신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.

#React#Next.js#SSR
24100

프론트엔드

마이리얼트립 SSR 최적화

SSR 도입 후 발생한 중복 API 호출과 성능 저하의 원인을 분석하고 구조를 개선한 사례를 다뤘습니다. queryKey 통일, 캐시 설정, 메서드 선택으로 FCP와 LCP를 크게 개선했습니다.

#Next.js#React#SSR
6500