# ssg
CS | Rendering 종류
브라우저의 Rendering 기본적인 렌더링의 설명이다. 아래 링크에 자세한 자료와 설명이 있다. 영상 - https://www.youtube.com/watch?v=oLC_QYPmtS0 자료 - https://davidhwang.netlify.app/Develop
[Next.js] 동적 라우팅과 fallback 옵션
동적 라우팅 페이지에서 getStaticPaths 및 getStaticProps를 통해 Static Generation을 적용하려는 상황에서, 다음과 같은 문제가 발생하였다.Link 컴포넌트를 통해 동적 라우팅 페이지로 접근할 때에는 getStaticProps가 정상적
#2. SPA는 CSR이고, MPA는 SSR인가? nope!
말 그대로 "한 개의 페이지로 구성된, 웹 애플리케이션!"(예를 들어, 페이지 이동시 기존페이지의 내부를 수정해서 화면을 보여준다는 의미!)클라이언트가 리소스를 잘 보관하고 있다가, 필요할 때 클라이언트에서(client side) 꺼내주렴!완전, 다른 개념!SPA는 말
.jpeg)
next JS 강의 정리 - 1 (nextJS & data Fetching)
public폴더 - /접근 가능 ex) src= '/varcel.svg'SSR - server side render : 서버작동( 터미널에 찍힘 ) 서버 부하를 일으킴CSR - client side render : 클라이언트 작동( 개발자도구 콘솔에 찍힘)SSG -
[Next.js] Static Generation vs. Server-side Rendering
1) Next.js란? Next.js는 빠른 웹 애플리케이션 제작을 위한 여러 유용한 기능들을 제공하는 리액트 프레임워크이다. 대표적인 기능으로는 프리 렌더링, 동적 라우팅, 자동 코드 스플리팅, 이미지 최적화, API 라우트 등이 있다. 이 중 프리 렌더링(Pr
Next js 동적 SEO 구현기
SEO란? SEO는 Search Engine Optimization의 약자로, Google과 같은 검색 엔진에서 상위 노출될 수 있도록 사이트를 최적화하는 일을 의미한다. 쉽게 말해 사용자가 특정 검색어를 쳤을 때, 우리 서비스가 최대한 상단으로 노출될 수 있도록 최적
[Next] 정적생성(SSG) & SSR
모든 페이지를 사전 렌더링(pre-rendering)을 통하여더 좋은 퍼포먼스와 SEO(검색엔진최적화)를 제공한다.CSR의 경우 빈 HTML에 JS까지 결합한 후에서야 페이지에 컨텐츠가 표시됨.SSR의 경우 서버에서 이미 생성된 HTML을 구성하여 클라이언트에 보내주고
[CS]CSR & SSR
SPA(3세대 - Single Page App)하나의 HTML 파일npm run build ⇒ html 파일 하나 생성됨(ex. AWS 배포할 때)페이지 이동 시 AJAX로 필요한 데이터만 받아서 JS로 필요한 부분만 재 렌더링하기 때문에 화면 깜빡임이 없다.서버로부터
12/20 배포(1)
예전에서는 스타트업이 존재하기 어려운시대였다. 어느순간 확 성장하는 기업이 스타트업인데, 어느순간 급격한성장이라는것은 그만큼 사용자가 급격히 많아져 트래픽이 갑자기 늘어나 그것을 감당해야한다는 것이다. 보통 배포시에는 하나의 컴퓨터를 사놓고 소스코드를 깃등으로다운받거나
CSR, SPA
리액트로 뭔가를 만든다고하면 아~ SPA를 만드는구나 라고 생가하면 된다.(Single Page Application)사용자가 클릭했을때 다른 페이지를 다운로드 받아서 껌뻑~ 하면서 리프레쉬되는 것이 아니라 한 어플리케이션 내에서 이 컴퍼넌트를 보여줬다가 숨기고 또 다
.jpg)
[Project] 포트폴리오 제작기 -5. Next.js SSG + AWS S3 403 Fallback Error
SSG를 AWS S3로 배포했을 때 발생하는 403 or Fallback 문제 삽질기 🔨
Next.js | Data Fetching
프리렌더링(Pre-rendering)n 앞서 공부한 것처럼 NextJS는 프리렌더링(pre-rendering) 기능을 제공한다.말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다.html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이
Web | CSR/SSR/SSG
Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다.CSR은 웹 서
[CS] CSR vs SSR (+SSG)
정의 : Client Side Rendering의 약자로 클라이언트 측에서 렌더링이 일어나는 방식.특징 :SPA에서 사용처음에 모든 JS 파일을 다운 받아 와서 초기 로딩 속도가 느리지만, 이후 페이지 전환 시 로딩 속도는 빠르다. (일부만 요청하면 되기 때문)서버에
서버 사이드 렌더링(SSR)
이 포스트에서 다룰 것 웹 페이지를 렌더링하는 방식들인 Server Side Rendering(SSR) Single Page Application(SPA) Static Site Generation(SSG) Client Side Rendering(CSR) 위의 개념들
Next.js 의 pre-rendering(SSG, SSR, ISR)
Next.js 란? Next.js는 React로 만드는 서버사이드 렌더링 프레임워크이다.