# nextjs 13버전 - 폴더기반 자동라우팅 - 새로디자인한 서버API 기능 - 쉬운 DB연결 - 직관적인 rendering 전략 선택기능 - hydration없는 server-side rendering - 파워풀한 캐싱 - 이미지와 폰트 최적화 # 개발 환경 셋팅 - nodejs 설치(lts버전 - node 18버전이상) - vscode 에디터 설치 - nextjs 설치 (npx create-next-app@latest) # 폴더 설명 - app 폴더 : 코드짤 폴더 - page.js : 메인페이지 (typescript를 쓰고 싶다면 tsx로 확장자를 바꾸면 된다.) - layout.js : 메인페이지 감싸는 용도의 페이지 - public 폴더 : 이미지나 static 파일 보관용 - api 폴더 ..
#nuxt.js 뷰 서버사이드 랜더링을 구현할 때 가장 많이 쓰는 프레임워크 SEO 전달 서버 사이드 렌더링이란 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식을 의미 쓰는이유 : 검색 엔진 최적화,빠른 페이지 렌더링 ssr이 무조건 좋은건가? 서버쪽에서 환경 구성이 되므로 서버빌드에 대한 이해도가 필요하다 node.js 환경에서 실행 되므로 브라우저 관련 api 다룰 시 주의 해야한다. 또한 beforeCreate나 created에서 window, document같은 브라우저 객체에 접근할 수 없다. 😉컴포넌트가 최초로 생성되는 시점이 브라우저 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없습니..
리액트의 ssr을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크 (리액트는 라이브러리) next.js의 pre-rendering을 통해서 페이지를 미리 랜더링 하며 완성된 html을 가져오기 때문에 사용자와 검색엔진 크롤러에게 랜더링된 페이지를 전달할 수 있다. #SSR(server side rendering) -클라이언트 대신 서버에서 페이지를 준비하는 원리 -리액트에서는 클라이언트 사이드 렌더링(CSR) 하기 때문에 서버에 영향을 미치치않고, 서버에서 클라이언트로 응답해서 보낸 html 도 거의 비어있음 -next.js 에서는 서버사이드 랜더링을 이용하므로 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있어 검색엔진 최적화에 좋은 영향을 줌 *CSR방식의 문제점 -서버에서 데이..
