Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

백고등어 개발 블로그

NextJS 란? 본문

Next.js

NextJS 란?

백고등어 2021. 12. 17. 11:58
더보기

💡 React에서 SSR(Server Side Rendering)을 쉽게 하기 위해 만들어진 프레임워크입니다.

😄 0. SSR 과 CSR 에 관하여

우선, SSR에 대한 간단한 설명과 그리고, CSR 과의 차이점을 알아보겠습니다

SSR(Server Side Rendering): 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고, 서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식입니다

  • 장점
    • 검색 엔진 최적화 가능
    • ⇒ 페이지가 로딩될 때 데이터도 함께 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문
    • 한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다
  • 단점
    • 페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에 서버 부하가 CSR보다 많다
    • React에서 SSR을 구현할 경우 코드와 구조가 복잡해질 수 있다

CSR(Client Side Rendering): 자바스크립트 파일을 브라우저에서 해석해 렌더링하는 방식입니다 비어있는 HTML 문서 위에 사용자의 요청마다 페이지를 구성하여 보여줍니다 React, Angular, Vue 등의 SPA(Single PageApplication)들이 이에 해당됩니다

  • 장점
    • 데이터 요청이 있을 때만 서버에 요청 하기 대문에 서버에 부담이 적다
  • 단점
    • 모든 JS파일을 다운 받아와야 하기 때문에, 서비스 규모가 커질경우 초기에 로드가 오래 걸린다
    • 초기 로딩에 빈 HTML 을 보내기 때문에 검색 엔진 최적화에 불리하다

🎯 SSR 과 CSR 에 대한 좀더 자세한 내용은 아래의 링크를 참고해주세요

 

[ 기술 스터디 ] SSR과 CSR의 차이

자강두천

velog.io

😁 1. NextJS의 특징

더보기

💡 NextJS는 SSR을 기반으로 하지만, 페이지가 로드된 이후엔 CSR 방식을 차용합니다

  1. 페이지는 서버가 그립니다 pages 폴더안에 폴더를 만들면, 해당 라우팅의 페이지들은 서버측에서 먼저 로드해줍니다(즉, pages 폴더 내부에 구성된 폴더 구조를 통해서 실제 라우팅 구조를 만들 수 있습니다)
  2. 페이지가 그려진 이후에 페이지 내부에서 동적인 데이터를 패치(axios 등)하는 과정은 CSR의 방식을 따릅니다 이때의 데이터들은 일단 페이지가 로드된 이후에 클라이언트 측에서 다시 렌더되며 불러와집니다 그렇기 대문에 검색 엔진에 걸리지 않습니다
    • 그렇기에 만약 페이지가 로드될 때 함께 데이터가 패칭되어야 하는 상황이라면 nextJS 의 데이터 패칭 방식(getStaticProps, getServerSideProps 등)을 이용해 첫 렌더에 데이터가 패칭될 수 있도록 처리 해주어야 합니다

NextJS CSR, SSR 요청 구분 하기!

 

[Next.js] - 튜토리얼(2) Dynamic Route CSR, SSR 요청 구분 하기!

Next를 사용하는 가장 큰 이유중 하나인 "Pre-Rendering" 기능에 대해 공부를 하면서 깨달은 점 몇가지가 있어서 정리를 해보았습니다. getInitialProps 를 이용한 CSR, SSR 요청 구분 Next.js의 문서를 보게 되

jaeseokim.tistory.com

 

🧐 1-1. SSR을 가능하게 하는 사전 렌더링(Pre-rendering)과 데이터 패칭(Data-fetching)

더보기

💡 NextJS는 기본적으로 모든 페이지를 사전 렌더링 합니다 이는 클라이언트에서 모든 작업을 하는 대신 서버에서 HTML 을 미리 생성한다는 것을 말합니다 고로 사전 렌더링의 결과로 더 나은 성능과 검색 엔진 최적화를 얻을 수 있습니다

사전 렌더링의 두 가지 형태

NextJS는 두 가지 형태의 사전 렌더링을 가지고 있습니다

⇒ 정적 생성과 SSR입니다 차이점은 언제 HTML 파일을 생성하는가 입니다

NextJS는 사전 렌더링 형태에 관하여 각 페이지마다 형태를 다르게 가져갈 수 있습니다

  • 정적 생성 특징
    • 프로젝트가 빌드되는 시점에 HTML 파일들이 생성됩니다
    • 생성된 HTML 파일들은 각 요청에서 재사용됩니다
  • SSR 특징
    • 각 요청마다 HTML을 새롭게 생성하는 방법입니다
    • 항상 최신 상태를 유지할 수 있습니다

사전 렌더링 형태에 관한 고려 사항

  • 유저의 요청이 적고 자주 업데이트되는 데이터가 없는 페이지라면 정적 생성을 사용하는 것이 좋습니다
    • 마케팅 페이지
    • 블로그 포스트
    • 전자 상거래 제품 목록
    • 도움말 및 문서
  • 반면 유저의 요청이 많고 자주 업데이트되는 데이터가 있는 페이지라면 SSR 형태를 사용하는 것이 좋습니다
    • SNS

NextJS의 데이터 패칭 메소드

  • getStaticProps
    • "빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다.
    • 장점은 호출 시 매번 데이터 패치를 하지 않으니 getServerSideProps보다 성능면에서 좋습니다
    function Blog({ posts, rand }) {
      return (
        <>
          <h1>{rand}</h1>
          <ul>
            {posts.map((post) => (
              <li key={post.id}>{post.name}</li>
            ))}
          </ul>
          <Link href="/">
            <a className="nav-link">뒤로가기</a>
          </Link>
        </>
      )
    }
    
    export const getStaticProps: GetStaticProps = async () => {
      const rand = Math.floor(Math.random() * 10)
      const res = await fetch('https://jsonplaceholder.typicode.com/users')
      const posts = await res.json()
    
      return {
        props: {
          posts,
          rand,
        },
      }
    }
    
    export default Blog
  • getServerSideProps
    • "페이지에 요청이 있을 때마다" 호출되어 사전 렌더링됩니다
    • 동적 데이터가 있는 페이지에 사용하면 됩니다
    • 매 요청마다 호출되므로 성능은 getStaticProps에 비해 떨어지지만, 항상 최신 상태의 데이터를 유지할 수 있습니다
    function Blog({ posts, rand }) {
      return (
        <>
          <h1>{rand}</h1>
          <ul>
            {posts.map((post) => (
              <li key={post.id}>{post.name}</li>
            ))}
          </ul>
          <Link href="/">
            <a className="nav-link">뒤로가기</a>
          </Link>
        </>
      )
    }
    
    export const getServerSideProps: GetServerSideProps = async () => {
      const rand = Math.floor(Math.random() * 10)
      const res = await fetch('https://jsonplaceholder.typicode.com/users')
      const posts = await res.json()
    
      return {
        props: {
          posts,
          rand,
        },
      }
    }

'Next.js' 카테고리의 다른 글

Next.js 사내 스터디 시작  (0) 2021.12.10