2. Single Page Application

SPA란 클라이언트 브라우저에서 서버로 최초 요청 시, 서버는 사실상 비어있는 .html 파일을 응답함

index.html


<html lang="en">
<head>
    <title>React SPA Example</title>
</head>
<body>
    <div id="root"></div>
 
	<!-- skip.. -->
</body>
</html>

이후 페이지에 나타낼 레이아웃에 해당하는 HTML Element들은 JavaScript 코드를 통해 렌더링을 수행함

index.html


<html lang="en">
<head>
    <title>React SPA Example</title>
</head>
<body>
    <div id="root">
        <!-- JavaScript를 통해 동적으로 생성된 엘리먼트가 여기에 추가됨 -->
        <!-- <div>Hello, Vailnna JS SPA!</div> -->
    </div>
 
	<!-- skip.. -->
	<script>
        // 화면을 그릴 루트 요소 선택
        const root = document.getElementById('root');
        // 새로운 div 요소 생성
        const appDiv = document.createElement('div');
        appDiv.textContent = 'Hello, Vanilla JS SPA!';
  
        // 생성한 요소를 root에 추가
        root.appendChild(appDiv);
    </script>
</body>
</html>

따라서 페이지에 나타낼 HTML Element에 대한 렌더링 처리는 서버가 아닌 브라우저가 수행하며,

이후 다른 페이지로 이동하는 등 추가적인 사용자의 요청이 발생하더라도, 서버에게 별도의 .html 파일을 요청하지 않으며, 기존의 JS 코드를 통해 페이지에 대한 렌더링을 수행함

그렇게 서버는 사용자가 최초 요청 시 단 하나의 html, js, css 파일만 응답하는 방식으로 동작하게 됨

이러한 SPA는 페이지 전환에 따른 렌더링 처리를 서버가 아닌, 클라이언트 측에서 수행하기 때문에 화면의 깜빡임 없이 사용자에게 보다 부드럽고 자연스러운 상호작용(Interaction)을 제공할 수 있다는 장점이 있음

반대로 단점으로는, 렌더링 작업이 브라우저를 통해 처리되기 때문에 사용자가 가진 디바이스의 성능에 따라 렌더링 속도가 영영향을 받을 수 있으며, 초기 페이지 요청 시 비어 있는 .html 파일로 인해 SEO에 불리하다는 특징이 있음