<div id="readability-page-1" class="page"><article id="mainContent">
                                <div>
                                    <p><a href="/m/category/Frontend"><span>Frontend</span></a></p><h3>CSR vs SSR, Next.js</h3>
                                </div>
                                <p><cite>Suhyeon Lee</cite>
                                    <span> 2023. 6. 12. 01:42</span>
                                </p>
                                
                            <div>
                                <h2>CSR(Client Side Rendering)</h2>

<figure data-ke-mobilestyle="widthOrigin" data-filename="Untitled.png" data-origin-width="663" data-origin-height="529">
    <span data-url="https://blog.kakaocdn.net/dn/pTFTL/btsjpE5oSNL/3aqYuZeQdA0Go7ev7JgKgk/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/pTFTL/btsjpE5oSNL/3aqYuZeQdA0Go7ev7JgKgk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="Untitled.png" data-origin-width="663" data-origin-height="529">
    </span>
    
</figure>
<ol data-ke-list-type="decimal">
<li>사용자가 페이지 접근</li>
<li>서버가 웹이 필요로 하는 스크립트와 스타일이 포함된 기본 html 마크업만 전송</li>
<li>클라이언트가 html과 js 다운 받음</li>
<li>다운 완료된 js가 실행, 데이터를 위한 api 호출</li>
<li>서버가 api로부터의 요청에 응답</li>
<li>api로부터 데이터를 받은 후 페이지 상호작용 가능</li>
</ol>


<h3 data-ke-size="size23">장점</h3>
<ol data-ke-list-type="decimal">
<li>초기 로딩 이후에 페이지 일부를 변경할 때는 구동 속도가 빠름</li>
<li>서버 부하 적음</li>
</ol>
<h3 data-ke-size="size23">단점</h3>
<ol data-ke-list-type="decimal">
<li>초기 로딩 속도 느림</li>
<li>SEO에 불리</li>
</ol>

<h3 data-ke-size="size23">SEO(검색 엔진 최적화)</h3>
<p data-ke-size="size16">검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠 색인을 생성합니다. 아래와 같이 csr에서는 빈 html만 있어, 검색 봇이 빈 페이지로 착각하게 됩니다.</p>
<pre id="code_1686501640926" data-ke-language="html" data-ke-type="codeblock"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link rel="icon" href="/favicon.ico" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
    &lt;meta name="theme-color" content="#000000" /&gt;
    &lt;meta
      name="description"
      content="Web site created using create-react-app"
    /&gt;
    &lt;title&gt;React App&lt;/title&gt;
    &lt;script type="module" crossorigin src="/assets/index-000087cd.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/assets/index-9f116458.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p data-ke-size="size16">구글 검색 엔진은 다른 검색 엔진과 달리 검색엔진에서 자바스크립트를 실행하는 기능이 탑재되어 있어서 페이지를 크롤링해 갈 때도 있지만 모든 페이지에 대해 자바스크립트를 실행해 주지는 않습니다.</p>
<p data-ke-size="size16">따라서 웹 서비스의 검색 엔진 최적화를 위해서는 서버 사이드 렌더링을 구현해주는 것이 좋습니다.</p>

<h2>SSR(Server Side Rendering)</h2>

<figure data-ke-mobilestyle="widthOrigin" data-filename="Untitled2.png" data-origin-width="769" data-origin-height="550">
    <span data-url="https://blog.kakaocdn.net/dn/dcPRkO/btsjlkUj0ww/9qt6cBejWRL77btxJKmBA1/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/dcPRkO/btsjlkUj0ww/9qt6cBejWRL77btxJKmBA1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="Untitled2.png" data-origin-width="769" data-origin-height="550">
    </span>
    
</figure>
<ol data-ke-list-type="decimal">
<li>사용자가 페이지 접근</li>
<li>서버는 페이지를 렌더링 해서 결과로 생성한 html 페이지를 클라이언트로 전송</li>
<li>html은 즉시 렌더링, 사이트 자체는 조작 불가능</li>
<li>클라이언트가 자바스크립트를 다운받음</li>
<li>다운 받는 동안 사용자가 컨텐츠를 볼 수는 있지만 조작 불가능, 웹은 사용자 조작을 기억함</li>
<li>브라우저가 js 프레임워크 실행</li>
<li>js까지 컴파일 되고 기억하고 있던 사용자 조작이 실행되고 웹 페이지와 사용자 간의 상호작용 가능</li>
</ol>


<h3 data-ke-size="size23">장점</h3>
<ol data-ke-list-type="decimal">
<li>초기 구동 속도 빠름</li>
<li>SEO에 유리</li>
</ol>
<h3 data-ke-size="size23">단점</h3>
<ol data-ke-list-type="decimal">
<li>사용자 경험이 나쁨</li>
<li>서버 부하 존재</li>
<li>화면 깜박임 존재</li>
</ol>
<hr data-ke-style="style1">
<h2 data-ke-size="size26">렌더링 방식 선택 기준</h2>
<h3 data-ke-size="size23">SSR</h3>
<ol data-ke-list-type="decimal">
<li>상위 노출이 필요</li>
<li>누구에게나 동일한 내용을 노출</li>
<li>데이터가 달라져서 미리 만들어두기 어려운 페이지</li>
</ol>
<h3 data-ke-size="size23">CSR</h3>
<ol data-ke-list-type="decimal">
<li>개인정보 데이터를 기준으로 구성</li>
<li>보다 더 나은 사용자 경험을 제공하기를 원함</li>
<li>상위노출보다 고객의 데이터 보호가 중요</li>
</ol>
<hr data-ke-style="style1">
<h2 data-ke-size="size26">SSR을 쉽게 구현해주는 프레임워크 Next.js</h2>
<p data-ke-size="size16">Next.js를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색최적화 문제를 해결하고, 그 다음 페이지부터는 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하를 줄이도록 할 수 있습니다.</p>

<h2 data-ke-size="size26">구현</h2>
<p data-ke-size="size16">Next.js(version 12)의 <code>getServerSideProps</code> 예약 함수를 사용합니다.</p>
<pre><code>export async function getServerSideProps() {
  const userData = await (
    await fetch(`http://example.com/api/user`)
  ).json();
  return {
    props: {
      user: userData,
    },
  };
}

function IndexPage(props) {
    return &lt;div&gt;Welcome, {props.user.name}&lt;/div&gt;;
}

export default IndexPage;</code></pre>
<ol data-ke-list-type="decimal">
<li><code>getServerSideProps</code> 비동기 함수를 익스포트</li>
<li><code>getServerSideProps</code> 함수는 <code>props</code>라는 속성값을 갖는 객체를 반환</li>
<li><code>IndexPage</code>함수에서 <code>Props</code>를 인자로 받음</li>
</ol>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">next.js 13버전 부터는 <code>App router</code>를 이용하며 <code>getServerSideProps</code> 등의 방식은 <b>적용되지 않습니다.</b>(<a href="https://nextjs.org/docs/app/building-your-application/data-fetching#old-methods">https://nextjs.org/docs/app/building-your-application/data-fetching#old-methods</a>).</p>
</blockquote>
<hr data-ke-style="style1">

<h2 data-ke-size="size26">REF</h2>
<p data-ke-size="size16"><a href="https://miracleground.tistory.com/entry/SSR%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-CSR%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81">https://miracleground.tistory.com/entry/SSR서버사이드-렌더링과-CSR클라이언트-사이드-렌더링</a></p>
<p data-ke-size="size16"><a href="https://proglish.tistory.com/216">https://proglish.tistory.com/216</a></p>
<p data-ke-size="size16"><a href="https://www.youtube.com/watch?v=YuqB8D6eCKE">https://www.youtube.com/watch?v=YuqB8D6eCKE</a></p>
<p data-ke-size="size16"><a href="https://velog.io/@support/CSR-VS-SSR-Next.js">https://velog.io/@support/CSR-VS-SSR-Next.js</a></p>
<p data-ke-size="size16"><a href="https://www.yes24.com/Product/Goods/116790367">실전에서 바로 쓰는 Next.js</a></p>
            
            
                </div>
            


<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="3250933968" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory"></ins>


                                            
            
                            </article></div>

공부 기록하는 블로그

Suhyeon Lee

CSR(Client Side Rendering)
  렌더링이 클라이언트에서 일어나는 방식입니다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내줍니다. 클라이언트는 그것을 받아 렌더링을 시작합니다.
사용자가 페이지 접근
서버가 웹이 필요로 하는 스크립트와 스타일이 포함된 기본 html 마크업만 전송
클라이언트가 html과 js 다운 받음
다운 완료된 js가 실행, 데이터를 위한 api 호출
서버가 api로부터의 요청에 응답
api로부터 데이터를 받은 후 페이지 상호작용 가능
  자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는 것이 없습니다.
 
장점
초기 로딩 이후에 페이지 일부를 변경할 때는 구동 속도가 빠름
서버 부하 적음
단점
초기 로딩 속도 느림
SEO에 불리
 
SEO(검색 엔진 최적화)
검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠 색인을 생성합니다. 아래와 같이 csr에서는 빈 html만 있어, 검색 봇이 빈 페이지로 착각하게 됩니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
    <script type="module" crossorigin src="/assets/index-000087cd.js"></script>
    <link rel="stylesheet" href="/assets/index-9f116458.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
구글 검색 엔진은 다른 검색 엔진과 달리 검색엔진에서 자바스크립트를 실행하는 기능이 탑재되어 있어서 페이지를 크롤링해 갈 때도 있지만 모든 페이지에 대해 자바스크립트를 실행해 주지는 않습니다.
따라서 웹 서비스의 검색 엔진 최적화를 위해서는 서버 사이드 렌더링을 구현해주는 것이 좋습니다.
 
SSR(Server Side Rendering)
  서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식
사용자가 페이지 접근
서버는 페이지를 렌더링 해서 결과로 생성한 html 페이지를 클라이언트로 전송
html은 즉시 렌더링, 사이트 자체는 조작 불가능
클라이언트가 자바스크립트를 다운받음
다운 받는 동안 사용자가 컨텐츠를 볼 수는 있지만 조작 불가능, 웹은 사용자 조작을 기억함
브라우저가 js 프레임워크 실행
js까지 컴파일 되고 기억하고 있던 사용자 조작이 실행되고 웹 페이지와 사용자 간의 상호작용 가능
  html이 서버에서 이미 렌더링 된 상태로 클라이언트에 전달되기 때문에, js가 다운되는 동안 사용자가 초기 렌더링 된 무언가를 볼 수 있음
 
장점
초기 구동 속도 빠름
SEO에 유리
단점
사용자 경험이 나쁨
서버 부하 존재
화면 깜박임 존재
렌더링 방식 선택 기준
SSR
상위 노출이 필요
누구에게나 동일한 내용을 노출
데이터가 달라져서 미리 만들어두기 어려운 페이지
CSR
개인정보 데이터를 기준으로 구성
보다 더 나은 사용자 경험을 제공하기를 원함
상위노출보다 고객의 데이터 보호가 중요
SSR을 쉽게 구현해주는 프레임워크 Next.js
Next.js를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색최적화 문제를 해결하고, 그 다음 페이지부터는 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하를 줄이도록 할 수 있습니다.
 
구현
Next.js(version 12)의 getServerSideProps 예약 함수를 사용합니다.
export async function getServerSideProps() {
  const userData = await (
    await fetch(`http://example.com/api/user`)
  ).json();
  return {
    props: {
      user: userData,
    },
  };
}
function IndexPage(props) {
    return <div>Welcome, {props.user.name}</div>;
}
export default IndexPage;
getServerSideProps 비동기 함수를 익스포트
getServerSideProps 함수는 props라는 속성값을 갖는 객체를 반환
IndexPage함수에서 Props를 인자로 받음
next.js 13버전 부터는 App router를 이용하며 getServerSideProps 등의 방식은 적용되지 않습니다.(https://nextjs.org/docs/app/building-your-application/data-fetching#old-methods).
 
REF
https://miracleground.tistory.com/entry/SSR서버사이드-렌더링과-CSR클라이언트-사이드-렌더링
https://proglish.tistory.com/216
https://www.youtube.com/watch?v=YuqB8D6eCKE
https://velog.io/@support/CSR-VS-SSR-Next.js
실전에서 바로 쓰는 Next.js

CSR vs SSR, Next.js

댓글