리액트 없이 SPA 비슷한 구조로 사용은 일반적인가..?

개인생각

SPA(?)구조 웹사이트(https://m.pet-friends.co.kr/main/tab/6) 를 클론중인데..

리액트 없이 하다보니 그냥 바닐라 스크립트로 innerHTML 을

활용할 수 밖에 없을거 같아서 GPT 에게 질문해 보았다.

아래부터는 GPT 답변..

---

서버에서 파일을 가져와 특정 요소의 innerHTML을 변경하는 방식은 일반적인 방식은 아니지만 특정 상황에서는 유용하게 사용될 수 있습니다.

✅ 이 방식이 사용되는 경우

1. SPA(싱글 페이지 애플리케이션) 비슷한 구조 구현

   • React, Vue 같은 프레임워크 없이도 페이지의 특정 부분을 비동기적으로 변경할 수 있습니다.
   • fetch()로 가져온 HTML을 innerHTML로 삽입하면, 전체 페이지를 새로고침하지 않고도 내용 변경이 가능합니다.

2. 페이지 일부만 동적으로 변경할 때 (예: AJAX 기반 페이지 전환)

   • 웹사이트의 헤더나 사이드바는 그대로 두고, 본문(content)만 교체하는 방식.
   • 예를 들어, 네비게이션 바는 그대로 두고, 클릭할 때마다 본문 내용만 교체하는 구조.
   • iframe을 사용하지 않고 특정 부분만 업데이트하고 싶을 때.

3. 서버에서 정적인 HTML 파일을 관리하는 경우

   • 정적인 HTML 파일을 서버에서 가져와 동적으로 삽입하면, 페이지별로 개별적인 HTML을 유지하면서도 동적 로딩이 가능합니다.
   • 예: 마크다운 문서를 HTML로 변환해 저장해 두고 필요할 때마다 불러와 표시.

---

❌ 이 방식이 일반적이지 않은 이유

1. SEO(Search Engine Optimization) 문제

   • 검색 엔진 크롤러는 동적으로 삽입된 innerHTML 내용을 제대로 인덱싱하지 못할 가능성이 있습니다.
   • 기본적으로 서버에서 완성된 HTML을 보내는 SSR(Server-Side Rendering) 방식이 SEO에 더 유리합니다.

2. History 관리가 필요함

   • fetch() 방식으로 페이지를 교체하면 브라우저의 뒤로 가기/앞으로 가기 기능이 정상적으로 작동하지 않습니다.
   • 이를 해결하려면 history.pushState() 등을 사용하여 히스토리를 관리해야 합니다.

3. JavaScript 의존성 증가

   • innerHTML로 페이지를 변경하면 JavaScript를 사용할 수 없는 환경(예: 일부 봇, 텍스트 브라우저)에서는 정상적으로 표시되지 않을 수 있습니다.
   • 또, 페이지를 동적으로 변경하면 <script> 태그가 실행되지 않는 문제가 발생할 수 있습니다.

---

🔥 보다 일반적인 대안 (페이지 교체를 위한 더 좋은 방법)

1. AJAX + History API 사용 (추천)

   • fetch()를 사용하면서도 history.pushState()로 URL을 업데이트하면, 사용자는 브라우저의 "뒤로 가기" 기능을 사용할 수 있습니다.

   <a href="page1.html" onclick="loadPage(event, 'page1.html')">페이지 1</a>
   <a href="page2.html" onclick="loadPage(event, 'page2.html')">페이지 2</a>
   
   <div id="content">여기에 새로운 페이지가 로드됩니다.</div>
   
   <script>
   async function loadPage(event, url) {
       event.preventDefault(); // 기본 링크 이동 방지
       const response = await fetch(url);
       const data = await response.text();
       document.getElementById('content').innerHTML = data;
       history.pushState(null, '', url); // URL 변경
   }
   
   window.addEventListener('popstate', async () => {
       const response = await fetch(location.pathname);
       const data = await response.text();
       document.getElementById('content').innerHTML = data;
   });
   </script>

   ✅ 장점:

   • fetch()로 페이지를 로드하면서도 브라우저 히스토리를 유지하여 뒤로 가기/앞으로 가기 가능
   • 전체 페이지 새로고침 없이 빠르게 전환 가능

2. 기존 프레임워크 사용 (React, Vue, Next.js 등)

   • SPA 방식이 필요하다면 React, Vue 같은 라이브러리를 사용하는 것이 더 효율적입니다.
   • 이들은 클라이언트 사이드 라우팅을 기본 제공하며, 성능과 SEO를 고려한 최적화도 되어 있습니다.

3. 서버 사이드 렌더링(SSR) 사용

   • 페이지 전체를 다시 로드하는 방식이지만, SEO와 접근성이 필요할 때 적절한 방식입니다.
   • 예: PHP, Node.js (Express + EJS), Django, Ruby on Rails 등.

---

결론: 이 방식은 특정 경우엔 유용하지만 일반적이지는 않음

✅ 사용해도 되는 경우

• 특정 영역만 동적으로 교체하는 것이 목표일 때
• SEO가 크게 중요하지 않은 내부 시스템, 관리자 페이지 등
• 빠른 프로토타이핑이 필요할 때

❌ 일반적인 경우 더 나은 대안이 있음

• fetch()를 사용할 경우 History API와 함께 사용하여 UX를 개선하는 것이 좋음
• 정적인 사이트라면 서버에서 직접 HTML을 렌더링하는 것이 SEO와 유지보수 측면에서 더 유리함
• 복잡한 페이지 전환이 필요하다면 React/Vue/Next.js 같은 프레임워크 사용 고려

💡 추가 질문이 있거나 구체적인 요구사항이 있다면 알려주시면 더 적절한 방식을 추천해 드리겠습니다! 😊