81. dompurify와 하이드레이션

owasp top 10
10가지의 최근 3~4년 보안의 핵심적인 부분

https://ko.wikipedia.org/wiki/OWASP

해킹

리액트에서 위에꺼는 필요없다

 

dompurify를 통한 조건부렌더링시 발생 가능한 하이드레이션 이슈

여기에 스타일을 입히면?

여기서

브라우저에서는 첫번째, 서버에서는 두번째

A: React.js는 실제로 주소가 없다던데, 사실이야?

B: 맞아! 어떤 주소로 접속을 해도 상관없이 모든 페이지의 html, css, js를 다운로드 받고 브라우저에서 가짜 주소를 만들지!

A: 그럼... 처음 접속할 때 다운로드 받는 파일이 많으니까 느리겠네?

B: 정확해!

A: 그럼... 어떻게 하면 처음 접속을 빠르게 할 수 있을까?

B: next.js를 활용해봐!

A: next.js는 서버에서 먼저 프리렌더링 하고, 결과를 다운로드 받아서 브라우저에서 Hydration 하는게 맞지?

B: 잘 알고 있네!

A: 음... 그런데 서버에서도 그리고, 브라우저에서 다시 그리면 더 느린거 아니야?

B: 배포할 때 build를 하게되면, 모든 페이지를 미리 그린 .next 폴더가 만들어져!

동시에 6개까지 가능

하이드레이션 연습

yarn build

초기 접속 속도가 빠르다

속도를 빠르게 하기 위해 프리렌더링이 있는 것