결론

정적 웹사이트 생성기인'React Static'으로 React가 만든 초단순 웹페이지를 정적 페이지로 만들었지만 빨라지지 않았다
https://speed-test-react.netlify.com/
https://speed-test-react-static.netlify.com/

배경.

구성 요소 방향의 쓰기를 매우 좋아하기 때문에 상태 변화가 전혀 없는 일반 사이트도 리액트로 쓰고 싶어졌다.
다만, 디스플레이가 느려질 수 있습니다...
다만, 누가 봐도 똑같은 내용인데 하나하나 브라우저의 JS로 과장한다...
정적 사이트 생성기를 사용하면 고속 디스플레이 상태에서 React로 개발할 수 있습니다...?　

해본 일

이미지와 텍스트가 배열된 초간단한 SP 전제의 WEB 페이지를 리액트와 리액트 Static으로 만들어 봤다.
Ajax 통신이 없습니다.

React 버전

https://speed-test-react.netlify.com/
https://github.com/IYA-UFO/speed-test-react

React

create-react-app

styled-components

BootStrap4의 CSS

총 700KB 정도의 이미지 일부 서버

React Static 버전

https://speed-test-react-static.netlify.com/
https://github.com/IYA-UFO/speed-test-react-static
상기 + React Static

비교 도구

성능 측정 초초보자라서 gug하면서 했어요.
Chrome devols 다운로드 속도가 10MB 느리고 CPU가 4배 느린 설정(MacBook Pro)

관점 비교

정적 페이지, 특히 마케팅류의 페이지에 있어 중요한 것은 첫 번째 시야를 똑똑히 보기 전의 시간이다.
그걸 비교하고 싶어요.
...승부

결실

Chrome devols Performance 태그

하나도 안 변했어!!
화면 왼쪽은 index입니다.이것은 "}"을 획득한 순간입니다.그 전의 일은 무대 위의 일과 관계가 없다.
위의 물결처럼 CPU 사용량을 나타냅니다.
대체로 다음과 같다.

블루 HTML 퍼스

노란색 JS 실행

퍼플 CSS 적용

자세히 보면 React 측은 렌더링 전에 50ms 정도의 JS 실행 시간을 가진다.이것이 바로 내가 줄곧 걱정하던 지연이다.
React Static은 HTML, CSS 처리가 끝난 후 이벤트 등을 처리하는 JS를 똑똑한 사양으로 설치했다.다만, 이번에는 활약할 기회가 없다.

Chrome devols Network

조금아니...?
이번 페이지는 첫 번째 보기에서 영웅적인 이미지?(320KB의 그 마리), 이 아이의 표시는 체감속도의 열쇠다.
React 쪽은main입니다.js에 따라 HTML이 생성되기 전에는 히어로 이미지를 요청할 수 없었고, React Static은 처음부터 맥스 6개 요청을 했다.덕분에 700ms 정도?떨어질 것 같아!

외관

변함이 없네요.
제목은 빠른 보기 표시이지만 여러 번 반전하면 동일합니다.
React+styled-components가 뒤에서 몰래 무엇을 하고 있는지 모르겠습니다.React Static은 오래된 좋은 HTML ⇔입니다.CSS가 추가한 표시입니다.

결론

초간단 React 애플리케이션?정적 생성기에서도 빨리 나타나지 않는다.

감상

성능의 측정

dentools의 표시의 2할을 이해하지 못하다.브라우저의 동작을 깊이 이해하지 않으면, 위험한 세계와 같다.
devolus의 견해를 체계적으로 배우고 싶습니다...

정적 웹 사이트 생성기

이번 리액션은 50ms로 HTML이 나왔지만 진정한 리액션 프로그램은 수초가 걸리는 경우도 적지 않다.정적 사이트에서 정식으로 활용된다면 수십 개의 구성 요소를 사용할 것이다. 이때 정적 사이트 생성기의 진정한 힘은 신음할 수도 있다.
물론 Ajax를 통해 CMS에서 데이터를 얻을 때 생성기의 사전 구축 효과가 뚜렷하다.

끝말

나는 브라우저를 잘 모르지만, 억지를 부렸다.가령, 잘못된 지적은 무엇이든지 최선을 다해 환영한다.
그 전에 React하면 돼요.