# pre-render

bae-sh

나도 예전에는 NextJS는 Server-side Rendering방식이야~ 라고만 생각하며 개발을 한적이 있다. 지금 생각해보면 NextJS가 유명하다고 무작정 따라하기만 했던거 같다... 😭 이번 기회에 공식문서를 정리를 해보며 NextJS의 강점인 pre-render에 대해 알아보자. NextJS 프레임 워크를 쓰는 가장 큰 이유 중 하나는 pre-render 방식이라고 생각을 한다. 이 pre-render 방식은 무엇이고 기존 React의 render와 무엇이 다른지 알아보자. 사전지식 Next JS에서는 페이지 단위로 어떠한 렌더링 방식으로 작동할 것인지 선택할 수 있다. 이는 SPA(Single Page Application) 방식을 사용하는 React 방식과 차별점이라고 볼 수 있다. Render > 렌더링 이란? HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는

lattechoi

내가 공부하려고 정리하는 글 1. React에서 고려해야 하는 부분들을 해준다 웹팩과 같은 번들러로 코드를 번들 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드들을 문법에 맞도록 변환) 코드스플리팅으로 production 최적화 성능 또는 SEO를 위한 pre-render (SSR, CSR 사용) 웹팩 : 애플리케이션에 필요한 모든 파일(모듈)을 병합하고 압축해서 하나의 결과물(번들)*을 생성해주는 도구로써, 애플리케이션의 성능 및 로드 시간을 줄여주는 역할을 한다. *바벨 : es6 버전 이하의 자바스크립트나 jsx, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 한다. (= 컴파일러) 코드스플리팅 : 지금 당장 필요한 코드가 아니라면, 따로 분리*시켜서 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통해

rageboom

개요 MDN에서는 아래와 같이 정의 하고 있다. > SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다. https://developer.mozilla.org/ko/docs/Glossary/SEO 검색 엔진이 윕사이트를 인터넷 상에서 찾아내어 결과로 노출하는 순위, 빈도를 높이는 과정으로 기술적인것 뿐 아니라, 마케팅, UI, 비지니스 측면도 최적화 과정에 포함한다. SEO에 관한 산업도 존재하고 마켓도 꽤 커보인다. https://www.forbes.com/sites/tjmccue/2018/07/30/seo-industry-approaching-80-billion-but-all-you-want-is-more-web-traff

chaerin00

Authomatic Static Optimization Next.js v9.3 이후로는 data fetching을 위해 사용하던 getInitialProps가 getStaticProps, getServerSideProps로 분리되었습니다. Next 공식 문서의 custom App에 대한 내용을 살펴보면 _app.tsx에서 getInitialProps를 사용할 시 Automatic Static Optimization의 기능이 사용불가능해지기 때문에 사용하지 말 것을 권장하고 있습니다. Automatic Static Optimization란 무엇인지 살펴보겠습니다. Next에서는 페이지에 getInitialProps 또는 getServerSideProps가 없을 때 해당 페이지를 static 페이지라고 인식하여 build시에 html 파일로 만들어버립니다. 이것을 build시에 pre-render한다고 하는 것입니다. 이렇게 html 파일을 만들면 유저의 요청이 들어왔을