林's

[SPA] 서버사이드 랜더링과 SPA 라우팅의 동작원리 본문

프로그래밍/웹프론트

[SPA] 서버사이드 랜더링과 SPA 라우팅의 동작원리

풀림이 2019. 9. 20. 00:05

SPA가 대략 어떤 방법론인지 알고, SPA의 클라이언트 사이드랜더링이 무엇인지 먼저 알고 오셨으면 좋겠습니다!

서버사이드 렌더링

html을 서버에서 사용자에게 완성해서 보내준다.

<!-- sub1.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>홈</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">홈</a></li>
        <li><a href="sub1.html">주제1</a></li>
        <li><a href="sub2.html">주제2</a></li>
      </ul>
    </nav>
    <section>
      <h1>홈</h1>
      안녕친구들~
    </section>
  </body>
</html>

  • 장점

    • 응답이 오면, 바로 그릴 수 있다.
    • 페이지마다 고유한 URL을 갖기 때문에 검색어 최적화 문제가 없다.
      • 쉽게 말해서, 구글 검색봇이 내 사이트를 잘 읽어가서 검색 결과에 올려준다는 말!

  • 단점

    • 헤더나 푸터같이 동일하게 보여지는 부분을, 요청할 때마다 같이 받아오니 낭비가 발생한다.
      • 잘 생각해보자, 우리가 jsp를 사용하던 시절, include 폴더에 헤더랑 푸터를 넣어두고 index.jsp 에서 붙여다 썼던 시절을!!

AJAX 의 등장

Asynchronous JavaScript and XML

비동기적인 웹 애플리케이션을 제작하기 위한 웹 개발 기법이다.

  • 장점

    • 필요한 부분만 그려서 낭비가 없다.
    • 링크를 타고 다니던 웹 서비스보다 편안한 사용자 경험을 제공해준다.
      • ex). 댓글 추가하면 바로 밑에 뜨잖아용?

  • 단점

    • 앞으로 가기, 뒤로가기와 같은 히스토리 관리가 안 된다.
      • ajax가 실행됐을 때, 주소창이 전혀 바뀌지 않는걸 보면 알 수 있다.
    • 자바스크립트 코드가 너무 많아졌다!

SPA

Single Page Application

단일 페이지에 렌더링에 필요한 모든 정적 리소스를 집어 넣는 개발 방법

그래서 html 페이지는 index.html 달랑 하나만 존재한다!

cf).정적 리소스: 사진이나 css, js 파일같이 페이지 렌더링에 필요한 파일들

라우팅의 원리

​ 라우팅이란 html의 네비게이션 객체를 이용하여 출발지에서 목적지까지의 경로를 결정하는 기능을 말한다.

​ 다시 말해서, 화면을 전환하는 기능이다.

다음과 같은 행동을 했을 때 화면이 전환 된다.

  • 브라우저의 주소창에 URL을 입력했을 때
  • 링크를 클릭했을 때
  • 앞으로 가기, 뒤로가기

​ SPA는 hash를 이용하여 라우팅한다.

​ 여기서 hash란 무엇일까?

​ 이는 우리가 아는 자료구조의 해시와는 의미가 조금 다르다.

아래 그림처럼 URI에서 #뒤에 오는 부분을 해시라고 칭한다.

해시는 이 URI로 그린 웹페이지 내부에서 이동하기 위해서 쓰인다.

uri hash에 대한 이미지 검색결과

이해를 돕기 위해 나무위키의 URI를 함께 봐보도록 하자.

아래는 나무위키의 SPA 문서를 가리키는 URI이다.

https://namu.wiki/w/SPA

해당 URI를 타고 목차 부분에 있는 4. 문제점을 클릭해보자.

그러면 주소창이 다음과 같이 바뀌는 것을 알 수 있다. 어떠한 변화가 일어났는가?

https://namu.wiki/w/SPA#s-4
  • 주소창에 hash를 가리키는 #이 붙었다.
  • 하지만, 새로고침이 일어나지 않고 화면이 이동했다!

이를 통해 해시를 사용하면,

새로운 페이지를 서버에 요청하는 게 아니라.

현재 페이지 내부에서 이동하는 것을 알 수 있다.

해시를 사용한 이동, 이게 바로 SPA 라우팅의 원리이다.

발생한 순서를 좀 더 세분화 해보면 다음과 같다.

  1. 네비게이션 클릭
  2. URI의 hash 변경
  3. 주소창의 URI가 변경되어 history 관리 가능
  4. hash만 변경되면, 서버로 재요청은 하지 않음
  5. uri의 hash가 변경되면 발생하는 이벤트인 hashchange 이벤트를 사용하여 변경된 hash에 매핑되어 있는 AJAX 함수를 실행한다.

정확한 동작을 알고 싶은 사람은 아래 링크를 통해 공부해보길 바란다.

https://poiemaweb.com/js-spa

  • 장점
    • 히스토리 관리가 된다!
    • 논리적으로 페이지가 분리되어서 이동할 수 있다.
  • 단점
    • js 코드가 더 많아졌다. 하지만, 역할별로 분리한다면 크게 관리가 어렵지 않다.
    • 여전히 검색어 최적화가 이루어지지 않는다.

검색어 최적화 문제(SEO)

풀리지 않는 마지막 숙제, 검색어 최적화

이를 해결하는 방법이, PJAX라고 하는 것인데.

IE10 이후에 등장한 popstate 와 history의 pushState 함수로 해결되었다.

pushState: 주소창의 URL을 변경하고 URL을 history enrtry에 추가한다. 하지만 요청은 하지 않는다.

이를 통해 페이지마다 고유의 URL이 존재하여 SEO 에 문제가 없다.

하지만 이는 서버사이드 랜더링과 AJAX 방식이 혼재된 방식이라서 사용자가 새로고침을 해버리면, 결국 서버쪽으로 요청을 하게 되어버린다.

이를 해결하려면 다음과 같은 일을 해야하는데. 말만 들어도 정말 복잡하다!!

서버는 클라이언트의 request header 의 Accept가 text/html 이면 HTML을 응답하고, application/json 이면 필요 리소스만 JSON으로 응답하도록 구현해야한다. AJAX를 구현할 때도 setRequestHeader 메소드를 하용하여 응답될 데이터의 mime type을 json 으로 설정해야한다...

요즘 구글 검색봇은 알아서 AJAX 요청을 변환시켜서 읽어간다고 하지만, 다른 페이지들은 그렇지 않다. 따라서 용도에 맞게 적절히 SPA를 사용해야할 것 같다.

PJAX를 자세히 공부하고 싶은 사람은 아래 링크를 참고하도록 하자.

https://mohwaproject.tistory.com/entry/HTML5-PushState%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-PJAX-%EA%B5%AC%ED%98%84

'프로그래밍 > 웹프론트' 카테고리의 다른 글

[Front] 불펌방지 적용하는 방법  (0) 2019.12.14
[ES6+] const, let, var  (0) 2019.09.13
[React] vscode script 안에서 emmet 사용하는 방법  (0) 2019.09.01
[WEB Front] veter 와 eslint 충돌 해결법  (0) 2019.07.27
'프로그래밍/웹프론트' Related Articles more
Comments