Next.JS Javascript disable test

Next.JS 앱은 초기에 렌더링 된 HTML을 보낸다고 하는데 일반 React앱과는 어떻게 틀린지 확인해 보고자 합니다. 읽어보기만 하는 것보다 직접 테스트를 해봐야 직성이 풀립니다. 자 그럼 테스트해보겠습니다.

 

테스트 방식은 이렇습니다. create-react-app와 next.js의 테스트 앱을 각각 구동하고 Javascript이 비활성화 되어 있을 때와 활성화 되어 있을 때의 차이를 비교해 봅니다.

 

먼저 일반적인 react.js 앱(create-react-app) 아래 명령을 수행해서 테스트 진행

npx create-react-app my-app
cd my-app
npm start

그러면 다음과 같은 화면을 볼 수 있습니다. 그러면 Javascript를 비활성화하고 다시 페이지를 열어봅시다.

---

크롬 자바 스크립트 비활성화: F12-> Setting -> Preferences 하단 Debugger에서 Disable Javascript 체크박스 선택

사파리 자바 스크립트 비활성화: 상단 메뉴 -> 개발자모드 -> Javascript 비활성화

---

아래와 같이 You need to enable JavaScript to run this app. 이 앱을 구동하려면 Javascript를 활성화 해야 합니다. 라는 메세지만 볼 수 있게 됩니다.

 

자 그러면 이번에는 Next.JS를 테스트해보겠습니다. 아래 명령으로 next.js앱을 생성하고 실행해보겠습니다.

npx create-next-app my-nextjs-app
cd my-nextjs-app
npm run dev

정상적으로 동작하는군요. 그러면 Javascript 비활성화 후 다시 테스트해 보겠습니다.

create-react-app과는 다르게 Nextjs는 Javascript를 비활성화 했음에도 불구하고 HTML 파일이 전달되어 화면에 표시가 됩니다. CSS는 Javascript를 사용하나 봅니다.

이런 이유 때문에 NextJS앱이 CDN에 배포되기 쉬워 초기 로딩시간이 빠르다고 합니다. SEO에도 훨씬 유리하구요.

그런데... Gatsby도 똑같은가? ㅎㅎ Gatsby도 테스트 해봐야겠습니다.

 

안녕~!