# ssg

ahn0min

Next.js 공식문서를 보게 되면 pre_rendering 에 대해 매우 강조하며 자랑스러워 하고있다고 느껴진다.그럼 pre_rendering 이 대체 무엇일까?필자는 SSR 과 SSG에 대해 간략히 알아본다면 보다 쉽게 pre_rendering 에 대해 이해할 수

soryeongk

페이지마다의 특징을 이해하고 렌더링 방식을 구분하는 것은 매우 중요합니다. 도대체 어떤 기준으로 선정해야할지 체크리스트와 함께 알아봅시다 ;) 개노답 3대장 CSR, SSR, SSG!! - 사견입니다

s2s2hyun

CSR, SSR, SSG 조화를 이루다. 은 Node.js 기반의 SSR 개발을 통해 겪은 경험기로 간단한 용어 설명 및 웹의 진화 과정에 대한 내용을 다룹니다.위의 세 단어는 웹 서비스를 해보셨다면, 웹 개발자뿐만 아니더라도 한 번쯤은 들어봤을 법한 용어입니다. 간단

hyeun427

웹 렌더링 기술에 대해 알아보자!CSR은 브라우저에서 자바스크립트를 이용하여 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작한다. 따라서 서버 측에서는 텅빈 HTML 문서 하나와 자바스크립트 코드만 내려주고 그 이후에 모든 일들은 클라이언트 측에서 브라우저가

owlsuri

SSG 스토리지에 정적파일 배포 LB(로드밸런서)도 ip주소 있음 브라우저에서 사이트주소 입력하면 DNS에서 LB의 ip로 보냄 LB에서 분기시켜줌 storage에 html, css, js 업로드 배포를 위한 폴더 설치(build) 혹시 .git 폴더가 있으면 삭제 버전 맞추기 package.json 수정 getServer...

kimareum

전체적 그림 복습 ! dns가 브라우져에서 ~.com 요청 받으면 ,요청을 ip주소로 바꾸어서 따로 lb(로드벨런서에)보내준다고 했지!그러면 로드밸런서는 ssr(서버사이드렌더링) ssg(스토리지에 저장된 정적파일!)에따라 요청을 분기를 처리한다 . 스토리지에 정적파일

kingmo

CSR은 Client Side Rendering의 약자로최초에 싱글페이지만 서버로부터 불러와 렌더링하고 그 이후부터는 모든 것을 클라이언트 사이드에서 렌더링한다.SPA(Single Page Applicataion)은 CSR 방식을 이용한다.SSR은 Sever Side

ahndong2

Next.js는 Vercel이라는 Frontend Team에서 만든 CSR, SSR 방식의 장점을 모두 가지고 생산에 필요한 많은 기능들을 제공하는 아주 강력한 React 프레임워크.CSR은 react, vue 등의 SPA(Single Page Application)에

lechuck

작성중

kskim625

CSR(Client-side rendering) 방식으로도 충분히 훌륭한 SPA 웹 애플리케이션을 만들 수 있다. 그럼에도 불구하고 SSR(Server-side rendering)과 SSG(Static-site generation)을 채택하여 프로젝트를 진행하는 경우가

heelieben

공식 문서: Next.js by Vercel - The React FrameworkLearn | Next.js렌더링: 리액트에서 작성한 코드를 HTML 로 변환하는 것SSR 과 정적 사이트는 Pre-Rendering 이라고도 부른다.외부 데이터를 fetch해서 리액트의

dltlaos11

최근 웹 어플리케이션의 개발은 대부분 react, angular, vue와 같은 js기반 프레임워크를 사용해서 SPA를 개발하게 된다. SPA는 Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션을 말하며 하나의 페이지 안에서 데

youthfulhps

최근 CRA 프로젝트를 넥스트로 이관하는 작업이 한창입니다. 넥스트는 서버 사이드 랜더링과 동시에 클라이언트 사이드 랜더링을 동시에 지원하기 때문에 점진적 이관이 가능했죠. 단순히 빌드가 실패되는 문제들을 제외하면요.이후 적절한 getStaticProps, getSta

shinwonse

현재 msw 를 이용해 모킹을 하면서 대략적인 서비스의 UI 구현이 모두 완료되었다. 아직 백엔드의 api가 완성이 되지 않은 상태이기 때문에 api를 기다리면서 클라이언트 개발을 점검해보도록 한다.프론트엔드 개발은 Next.js 위에서 이루어졌다. 따라서 Next.

kim98111

pre-rendering이 동작하는 방식과 HTML 문서 생성 과정

kjh1551

사용자가 한 페이지에 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로만 업데이트Vue, React 등 CSR 프레임워크가 개발되었다.검색 엔진 최적화 검색 엔진에서 찾아지기 쉽게 하는것 이미 만들어져 있는 HTML 파일을 클라이언트에게 넘겨준다.장점 \- 페이

jkl1545

1990년 중반까지는 모두 정적 사이트였다. 서버에 이미 잘 만들어진 HTML 문서들이 있고 사용자가 브라우저에서 특정 주소에 접속하면 서버에 이미 배포된 HTML 문서를 보여주는 방식이다. 정적 사이트의 문제점은 링크 변경 시 다시 서버에서 해당 페이지의 HTML을

zihs0822

SEO: Search Engine Optimization SSR: Server Side Rendering CSR: Client Side Rendering 서치엔진 옵티마이제이션을 위해서는 서버에서 클라이언트로 온전한 html 페이지를 내려줘야한다. 이를 위해 Spri

soryeongk

Next.js의 기초를 확인하고, 흐름을 익힙니다.

yooni

JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 기술을 사용하는 웹 개발 기법웹 페이지에서 필요한 데이터만 비동기적으로 받아와 유저의 요구에 따라 변화해야 하는 부분만 렌더링한다.Fetch이전에 사용하던 XHR(XMLHttpRequ