# ssg

82개의 포스트

CS | Rendering 종류

브라우저의 Rendering 기본적인 렌더링의 설명이다. 아래 링크에 자세한 자료와 설명이 있다. 영상 - https://www.youtube.com/watch?v=oLC_QYPmtS0 자료 - https://davidhwang.netlify.app/Develop

4일 전
·
0개의 댓글
·
post-thumbnail

[Next.js] 동적 라우팅과 fallback 옵션

동적 라우팅 페이지에서 getStaticPaths 및 getStaticProps를 통해 Static Generation을 적용하려는 상황에서, 다음과 같은 문제가 발생하였다.Link 컴포넌트를 통해 동적 라우팅 페이지로 접근할 때에는 getStaticProps가 정상적

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

#2. SPA는 CSR이고, MPA는 SSR인가? nope!

말 그대로 "한 개의 페이지로 구성된, 웹 애플리케이션!"(예를 들어, 페이지 이동시 기존페이지의 내부를 수정해서 화면을 보여준다는 의미!)클라이언트가 리소스를 잘 보관하고 있다가, 필요할 때 클라이언트에서(client side) 꺼내주렴!완전, 다른 개념!SPA는 말

2023년 1월 26일
·
1개의 댓글
·
post-thumbnail

[Next.js] CSR vs SSR

CSR과 SSR 설명을 기반으로 한 Next.js data fetch 방법 정리!

2023년 1월 20일
·
2개의 댓글
·
post-thumbnail

next JS 강의 정리 - 1 (nextJS & data Fetching)

public폴더 - /접근 가능 ex) src= '/varcel.svg'SSR - server side render : 서버작동( 터미널에 찍힘 ) 서버 부하를 일으킴CSR - client side render : 클라이언트 작동( 개발자도구 콘솔에 찍힘)SSG -

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

[Next.js] Static Generation vs. Server-side Rendering

1) Next.js란? Next.js는 빠른 웹 애플리케이션 제작을 위한 여러 유용한 기능들을 제공하는 리액트 프레임워크이다. 대표적인 기능으로는 프리 렌더링, 동적 라우팅, 자동 코드 스플리팅, 이미지 최적화, API 라우트 등이 있다. 이 중 프리 렌더링(Pr

2023년 1월 6일
·
0개의 댓글
·
post-thumbnail

Next js 동적 SEO 구현기

SEO란? SEO는 Search Engine Optimization의 약자로, Google과 같은 검색 엔진에서 상위 노출될 수 있도록 사이트를 최적화하는 일을 의미한다. 쉽게 말해 사용자가 특정 검색어를 쳤을 때, 우리 서비스가 최대한 상단으로 노출될 수 있도록 최적

2023년 1월 5일
·
4개의 댓글
·

[Next] 정적생성(SSG) & SSR

모든 페이지를 사전 렌더링(pre-rendering)을 통하여더 좋은 퍼포먼스와 SEO(검색엔진최적화)를 제공한다.CSR의 경우 빈 HTML에 JS까지 결합한 후에서야 페이지에 컨텐츠가 표시됨.SSR의 경우 서버에서 이미 생성된 HTML을 구성하여 클라이언트에 보내주고

2022년 12월 31일
·
0개의 댓글
·

[CS]CSR & SSR

SPA(3세대 - Single Page App)하나의 HTML 파일npm run build ⇒ html 파일 하나 생성됨(ex. AWS 배포할 때)페이지 이동 시 AJAX로 필요한 데이터만 받아서 JS로 필요한 부분만 재 렌더링하기 때문에 화면 깜빡임이 없다.서버로부터

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

조리복 프로젝트 - Next의 SSR 제대로 알고 사용하기

조리복 프로젝트에서 SSR하기

2022년 12월 28일
·
0개의 댓글
·
post-thumbnail

12/20 배포(1)

예전에서는 스타트업이 존재하기 어려운시대였다. 어느순간 확 성장하는 기업이 스타트업인데, 어느순간 급격한성장이라는것은 그만큼 사용자가 급격히 많아져 트래픽이 갑자기 늘어나 그것을 감당해야한다는 것이다. 보통 배포시에는 하나의 컴퓨터를 사놓고 소스코드를 깃등으로다운받거나

2022년 12월 20일
·
0개의 댓글
·
post-thumbnail

CSR, SPA

리액트로 뭔가를 만든다고하면 아~ SPA를 만드는구나 라고 생가하면 된다.(Single Page Application)사용자가 클릭했을때 다른 페이지를 다운로드 받아서 껌뻑~ 하면서 리프레쉬되는 것이 아니라 한 어플리케이션 내에서 이 컴퍼넌트를 보여줬다가 숨기고 또 다

2022년 12월 19일
·
0개의 댓글
·
post-thumbnail

SSG SSR CSR ISR 그리고 SPA MPA

프론트앤드 렌더링 분류

2022년 12월 9일
·
0개의 댓글
·
post-thumbnail

[Project] 포트폴리오 제작기 -5. Next.js SSG + AWS S3 403 Fallback Error

SSG를 AWS S3로 배포했을 때 발생하는 403 or Fallback 문제 삽질기 🔨

2022년 12월 7일
·
0개의 댓글
·
post-thumbnail

Next.js | Data Fetching

프리렌더링(Pre-rendering)n 앞서 공부한 것처럼 NextJS는 프리렌더링(pre-rendering) 기능을 제공한다.말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다.html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이

2022년 12월 7일
·
0개의 댓글
·
post-thumbnail

Web | CSR/SSR/SSG

Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다.CSR은 웹 서

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

What I Learn - CSR vs SSR (+ SSG)

CSR vs SSR 비교 그리고 SSG

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

[CS] CSR vs SSR (+SSG)

정의 : Client Side Rendering의 약자로 클라이언트 측에서 렌더링이 일어나는 방식.특징 :SPA에서 사용처음에 모든 JS 파일을 다운 받아 와서 초기 로딩 속도가 느리지만, 이후 페이지 전환 시 로딩 속도는 빠르다. (일부만 요청하면 되기 때문)서버에

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

서버 사이드 렌더링(SSR)

이 포스트에서 다룰 것 웹 페이지를 렌더링하는 방식들인 Server Side Rendering(SSR) Single Page Application(SPA) Static Site Generation(SSG) Client Side Rendering(CSR) 위의 개념들

2022년 11월 5일
·
0개의 댓글
·
post-thumbnail

Next.js 의 pre-rendering(SSG, SSR, ISR)

Next.js 란? Next.js는 React로 만드는 서버사이드 렌더링 프레임워크이다.

2022년 9월 27일
·
0개의 댓글
·