둔필승총

웹 응용 프로그램의 구성 요소

• User Interface - 사용자가 응용프로그램을 사용하고 상호 작용하는 방식을 설명.
• Routing - 사용자가 응용프로그램의 다른 부분을 navigate하는 방법.
• Data Fetching - 데이터 저장 위치 및 데이터 입수 방법.
• Rendering - 정적 또는 동적 콘텐츠를 렌더링할 순간과 위치.
• Integrations - 사용하는 타사 서비스(CMS, auth, payments 등) 및 이러한 서비스에 연결하는 방법.
• Infrastructure - 응용 프로그램 코드(Serverless, CDN, Edge 등)를 배포, 저장 및 실행할 수 있는 위치.
• Performance - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
• Scalability -  team, data 및 트래픽 증가에 따라 애플리케이션이 어떻게 적응하는지.
• Developer Experience -  애플리케이션 구축 및 유지 관리 경험

Next.js는 React Framework로 빠르게 web application을 만들 수 있다.

Next.js를 사용하는 이유는 SSR(서버 사이드 렌더링)이기 때문이다.

 서버 사이드 렌더링이란 서버에서 페이지를 그려서 클라이언트로 보낸 후 화면에 표시하는 기법이란 뜻이다. 즉, 클라이언트가 그리는 것보다 빠르다는 점이 중요하다.

 또한 검색 엔진 최적화와 빠른 페이지 렌더링이 된다.

 검색 엔진 최적화(SEO)란 구글, 네이버와 같은 검색 사이트에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화 하는 기법이다. (물론 구글 크롤러 봇은 자바스크립트를 실행할 수 있어서 CSR의 크롤링도 가능하지만 완벽하지는 않다)

 그리고, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적이다.

 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것이다.

서버 사이드 렌더링의 단점이라고 할 것은 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하고 Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 한다. (이 점은 폴더 구조를 설명하면서 설명하겠다. 이 점 때문에 window나 document와 같은 브라우저 객체에 접근할 수 없다.)

이런 단점들을 제쳐두고 장점이 좋기 때문에 Next.js를 사용하는 것 같다.