DOMPurify

DOMPurify 백아저씨들이 데이터를 줄때 태그도 같이 주는 경우가 있다

예를들어 에디터 내용을 그대로 주는 경우(안그러면 css적용이 안된다잉 ㅠㅠ)

 

참고로 이거는 클라이언트 전용 라이브러리 이기때문에 서버사이드컴포넌트에서는 사용이 불가능 하다.

왜냐면 window객체와 document객체를 사용해서 DOM을 조작하는데 서버사이드에서는 이게 없기때문에..

서버 사이드에서도 가능하게 다른 라이브러리를 쓰면 된다는데 성능이 살짝 않좋다 라는게 잇어서 어차피 클라이언트 페이지에서도 써야하는데 한번에 쓰자는 마인드로 사용해볼까 한다.

 

그 전에 알아 볼게 있는데 dynamic이라는 nextjs 내장 라이브러리이다.

 

우리는 클라이언트컴포넌트에서만 쓸껀데 먼상관? 이라고 하면 일단 해봐라 안된다. 

우리는 클라이언트 컴포넌트에서 사용한다라고 하지만 부모놈이 서버컴포넌트라면? 이상하게 동작하기 때문이다.

 

그래서 dynamic이라는게 먼데 라고 하면 csr에서만 사용되고 ssr에서는 실행시키지 않도록 원천 차단 시킬수 있는 라이브러리라고 생각하면 된다.

 

const NoSSRContent = dynamic(() => import('@/app/_component/HtmlContent'), {
  ssr: false, // ✅ SSR에서 실행되지 않도록 보장
});

 

사용방법은 은근 간단한데 DOMPurify를 사용한 컴포넌트를 이렇게 한번 감싸고 사용하면 된다. 

그럼 ssr에서 실행 안시키고 작업하면 머가 좋은데 라고 할 수 있는데 어차피 ssr랜더링이 안되기 때문에 이부분 같은경우는 초기 렌더링 속도를 최적화 할수 있다... 이것만으로도 많은걸 해주는 느낌이다.. 개발자 놈들은 1분 1초라도 단축시켜야하는 미친 종족이니까.. 아니면 유저가 돔황치니 ㅠㅠ 가지마라..

 

다시 돌아와서 DOMPurify을 사용하는 법도 간단 햇는데 데헷 모든게 끝났쩌영 ㅎㅎ ㅂ2

'use client';
import React from 'react';
import style from './html.module.scss';
import DOMPurify from 'dompurify';

interface INoSSRContentProps {
  html: string;
}

export default function HtmlContent({ html }: INoSSRContentProps) {
  const cleanContent = DOMPurify.sanitize(html);
  return (
    <div
      dangerouslySetInnerHTML={{ __html: cleanContent }}
      className={style.html}
    />
  );
}