Next.js 13 - 6. Single Page Application

Server Side Rendering

SSR - Next.js 를 사용하면 좋은 것.

 

개발자 도구를 켜고 메뉴에서 run command를 클릭하면 disable javascript라는 메뉴가 있다. 이걸 누르면 JS가 꺼지게 된다.

 

React는 JS 기술이기 때문에 JS가 동작하지 않으면 웹페이지가 아예 렌더링되지 않는다. 하지만 Next.js로 만든 웹페이지는 리로드 해도 렌더링이 잘 된다. 이것이 어떻게 가능한가?

 

사용자가 요청하면 next.js가 서버 쪽에서 react를 실행해서 그 응답 결과를 .next에 저장해서 그것을 응답하기 때문이다.

Next.js는 JS가 아닌 HTML을 응답한다. 따라서 잘 동작하는 것이고 검색엔진 최적화에 좋다.

 

disable javascript를 실행했다면 다시 enable javascript를 실행해서 다시 JS를 실행하자.

 

Single Page Application

Next.js가 극복해야 될 단점도 아직 존재한다. 네트워크로 가서 Fast 3g로 하게 되면 일부러 네트워크 지연 현상을 만들 수 있다. 이제 페이지가 얼마나 로딩되는지 천천히 확인 가능하다. 이 상태로 홈이나 다른 페이지를 가게 되면 실제로 바뀌는 부분은 layout의 children 부분 밖에 없지만 모든 페이지를 다시 다운받고 있는 것을 볼 수 있다.

 

사용자 입장에서는 느리다고 느낄 것이고 서비스를 제공하는 입장에서는 돈이 많이 들 수 있다. 그리고 이미 방문한 적 있었던 페이지를 방문할 때 또 다시 페이지를 다운로드 받고 있다. 

 

그럼 이런 문제를 극복하려면 어떻게 해야 할까? 딱 하나만 해주면 된다. a 태그를 Link 태그로 바꿔주자! 그럼 웹페이지에서 Link에 마우스를 올려두면 아직 클릭하지 않았음에도 백그라운드에서 미리 그 페이지를 다운로드 받는다. 클릭하자마자 바로 나타나게 된다. 그리고 이미 방문했던 페이지를 다시 방문하려고 하면 아예 서버랑 통신도 하지 않는다. 사용자 입장에서는 빠르고 서비스 제공자 입장에서는 돈을 절약할 수 있다.

 

이렇게 웹페이지가 여러 개의 페이지임에도 불구하고 한 페이지인 것처럼 동작하는 애플리케이션을 싱글 페이지 애플리케이션이라고 한다. 그리고 Next.js를 이용하면 a 태그를 Link 태그로 바꾸는 것만으로도 Single Page Application이 되는 경험을 할 수 있다.

 

만약 Network를 Fast 3g로 바꾸었다면 nothrotting으로 바꾸는 걸 잊지 말고 해주자!

 

 

+ ) 마우스를 올려둬도 백그라운드에서 다운로드가 안 되는 현상 이유

nextjs에 업데이트가 있었는지 개발환경에서는 미리 데이터를 읽어오는 prefetch 기능이 작동하지 않는 것 같습니다. 대신 npm run build && npm run start를 해서 배포판을 실행하면 화면에 링크가 노출되는 것만으로도 미리 데이터를 받아오네요.

 

 

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩