해당 포스팅은 Next.js 기반의 프로젝트에서 마크다운 콘텐츠 렌더링을 위한 라이브러리를react-markdown에서 next-mdx-remote/rsc로 마이그레이션 한 과정과 그 결과를 공유한 내용입니다. 길고 복잡한 마크다운 콘텐츠 처리를 클라이언트 대신 서버에서 수행함으로써클라이언트 번들 크기를 줄이고, RSC의 이점을 활용하여 초기 로딩 성능과전반적인 UX를 개선한 과정을 설명하고자 합니다.1️⃣ 마이그레이션을 결심한 이유 React Server Components(RSC)와 tanstack-query의 조합으로 서버 컴포넌트를 사용하기 전,클라이언트 컴포넌트에서 마크다운 콘텐츠가 포함된 페이지를 구성해보고 있었습니다. 당시 서버로부터 문자열(string) 형태로 전달받은 markdown 데이..

왜 react-markdown 적용이 안되는 걸까사내에서 신규 프로젝트 진행 중, reset.css로 인해HTML 요소의 기본 스타일이 제거되어 react-markdown을 통한 마크다운이일반 텍스트처럼 보이는 문제가 있었습니다.문제 해결markdown 컴포넌트의 상위 요소에 개별 스타일을 설정해 주는 것으로 해결 가능합니다.1. markdown 상위 요소를 생성한다. const Markdown = () => { ... return ( ... ) : ( {children} ); }, }} ..