# SSR
CSR / SSR with Next.js
CSR(Client-side Rendering) & 장점? CSR은 클라이언트 측면에서 화면을 렌더링하는 방식이다. 1. 먼저, 브라우저에서 초기 화면을 로드하기 위해 서버로 요청을 보낸다. 서버는 빈 뼈대만 있는 HTML 을 브라우저에 응답으로 보내준다. 브라우저에
SSR, CSR로는 드립을 못치겠다...SPA
무릇 기술 용어들이 그렇듯 SSR, CSR 그리고 그와함께 따라오는 SPA, MPA, SEO같은 단어들은 볼때부터 숨이 막힌다이번에도 부숴볼예정일단은, SPA MPA부터SPA:Single Page AppMPA:Multi Page App쉽죠..?이해하고 할 것도 없음.
CSR / SSR with Next.js
CSR에 관해 이야기 하기 전에 먼저 SPA를 먼저 알 필요가 있다.SPA란 Single Page Application 으로 최초 한 번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용하는 단일 페이지로 구성된 웹 애플리케이션이다. SPA에서는 화면 구성에 필요
Next.js 입문하기 - Next가 뭘까? CSR과 SSR의 차이
Next는 리액트 기반 프레임워크이다.리액트에서 페이지가 넘어가는 것 처럼 보이는 것은 사실 페이지가 실제로 넘어가는 것이 아닌, 하나의 페이지에 컴포넌트만 변경되는 것이다. Next.js는 빠른 페이지 로드를 위한 코드 스플리팅이 가능하고, SSR을 페이지 단위로 지
프리온보딩 챌린지 - CSR / SSR with Next.js
CSR: Client-side Rendering 클라이언트 사이드 렌더링은 클라이언트 측에서 최초에 1번 전체 페이지를 로딩하고, 이후에는 사용자의 요청에 따라 서버에서 데이터를 받고 클라이언트가 해석하고 렌더링 하는 방식이다. CSR은 모바일 기술이 발전하면서 모바
라이브러리와 프레임워크의 차이
이 글은 노마드 코더님의 강의를 바탕으로 기록과 공유를 위한 의미를 가지고 있습니다.라이브러리는 우리가 '호출'하는 개념이다.가지고 와서 우리에 코드에 사용하는 느낌프레임워크는 우리가 프레임워크 안에 들어가서 사용하는 개념.예를들어 제일 유명한 라이브러리인 jQuery
[Next.js]CSR이란 무엇이며 SSR은 왜 필요한가요?
HTML 문서에서 모든 데이터를 받지않고, 기본적인 정보만 담고있는 뼈대를 사용하여자바스크립트 파일과 연결한 뒤, 나머지 웹 페이지를 렌더링합니다.작동원리 1\. 유저가 웹페이지에 접근요청2\. 서버가 브라우저에 응답3\. 브라우저가 Javascript 파일 다운로드4
[Next.js] 렌더링 (CSR, SSR, SPA)
클라이언트 사이드 렌더링(CSR)텅 빈 html페이지가 먼저 브라우저에 보내지고 브라우저가 자바스크립트를 받아와 동적으로 렌더링하는 것을 말한다.필요한 데이터만 받아서 보여주므로 트래픽이 감소된다.바뀐 부분만 렌더링하므로 빠른 화면전환이 가능하다.사용자가 첫화면을 보기
[Next.js] Next js 시작하기
※ 실행 후 파일을 열었을 때 해당 에러가 발생한다면Parsing error: Cannot find module 'next/babel'1) 프로젝트 루트경로에 .babelrc 파일을 만들어준 뒤 해당 내용을 입력한다.2) 프로젝트 루트경로에 있는 .eslintrc.js
SPA (Single Page Application)
: 서버로부터 완전한 새로운 페이지를 불러오는 게 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아, 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트전통적인 웹사이트 : 페이지 전체를 새롭게 불러온다(loadi
Next.js 프로젝트에서 yarn start 스크립트를 실행하면 무슨 일이 벌어질까?
CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.Next.js
CSR / SSR with Next.js
CSR(Client-side Rendering)과 SSR(Server-side Rendering)의 차이를 명확히 알려면,우선 SPA(Single page Application)의 개념을 이해하고 넘어가는게 좋을 것 같다.용어 그대로 하나의 페이지를 가진 어플리케이션이
Next.js 의 pre-rendering(SSG, SSR, ISR)
Next.js 란? Next.js는 React로 만드는 서버사이드 렌더링 프레임워크이다.
CSR / SSR 이란? (web.dev 읽어보며 개념과 장단점 알아보기)
오랫만에 유노님의 짤을 보며 항상 대충이라는 벌레를 경계하며 시작해본다! 면접을 준비하면서 많이 접했던 주제이고 대략적으로 알고 있지만, 한번 쯤 스스로 정리 하고 싶었던 csr과 ssr에 대해 이번 기회를 통해 정리하려고 한다! 구글에서 저공하는 web.dev에
원티드 프리온보딩 챌린지 10월(CSR / SSR with Next.js) 사전 과제
CSR이란 무엇인가? > CSR: Client-side Rendering 클라이언트 측에서 화면을 구성하는 것이다. 최초 요청 시에 데이터를 제외한 HTML, CSS, JavaScript 등의 리소스를 응답 받고, 이후에는 클라이언트에서 필요한 데이터만 요청해서 J
CSR , SSR with Next.js
클라이언트가 서버에서 HTML, CSS, JS 파일을 내려 받습니다. 서버는 단지 JSON 파일만 보내주는 역할을 하며 HTML을 그리는 역할은 클라이언트의 JS에서 수행합니다.사용자의 행동에 따라 필요한 부분만 불러옵니다. 사이트의 개발자 도구를 켜 볼 시에 빈 H