반응형 CSR2 Next App router에서 use client가 CSR을 뜻하지는 않는다. Next App router에서 use client가 CSR을 뜻하지는 않는다. next app router를 이용해서 블로그를 만들고 있는데, javscript를 꺼도 클라이언트 컴포넌트가 렌더링되었다. "use client"; import { gql } from "@apollo/client"; import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; import React from "react"; const PAGE_CONTENT_QUERY = gql` query Article($ItemId: ItemId!) { aritlcle(filter: { id: { eq: $ItemId } }) { id markdown(ma.. 2023. 10. 5. Pre-rendering (직접 실험하면서 확인) Next.js의 장점중 하나는 Pre-rendering 된다는 것이다. Pre-render를 통해 얻을 수 있는 장점은 다음과 같다. UX향상 SEO 향상(SEO는 초기 HTML의 meta 태그를 분석) CSR - 리액트 Create-react-app으로 만든 앱의 경우, 브라우저가 UI를 만드는 client-side-render를 한다. 즉 UI가 HTML 코드에 들어있지 않다는 것이다. Create-react-app으로 만든 앱의 경우 바디태그에는 이외에는 전부 자바스크립트이다. 위를 보면 사실상 비어있는 body태그이다. create-react-app으로 만든 페이지가 있다면 네트워크 탭에서 통신속도를 느린3G로 설정하고 새로고침을 해보자. 처음에는 하얀화면만 보이다가 서서히 구성요소들이 렌더링되는.. 2022. 1. 27. 이전 1 다음 반응형