단일 페이지 어플리케이션으로 CSR 형태를 띄고, 그렇기 때문에 페이지 이동간 다시 새로고침되지 않아 네이티브 앱과 같은 경험 제공
CSR 형태이기 때문에 SEO 이슈 발생
React의 경우 Next.js 와 같은 SEO 이슈를 해결할 방법을 가지고 있음
<a href="/service">Service</a>
const routes = [
{ path: '/', component: Home },
{ path: '/service', component: Service },
{ path: '/about', component: About },
];
navigation.onclick = e => {
if (!e.target.matches('#navigation > li > a')) return;
e.preventDefault();
const path = e.target.getAttribute('href');
render(path);
};
<a href="#service">Service</a>
const routes = [
{ path: '', component: Home },
{ path: 'service', component: Service },
{ path: 'about', component: About },
];
const render = async () => {
try {
// url의 hash를 취득
const hash = window.location.hash.replace('#', '');
const component = routes.find(route => route.path === hash)?.component || NotFound;
root.replaceChildren(await component());
} catch (err) {
console.error(err);
}
};
window.addEventListener('hashchange', render);
window.addEventListener('DOMContentLoaded', render);
<a href="#service">Service</a>
navigation.addEventListener('click', e => {
if (!e.target.matches('#navigation > li > a')) return;
e.preventDefault();
const path = e.target.getAttribute('href');
window.history.pushState({}, null, path);
render(path);
});
window.addEventListener('popstate', () => {
console.log('[popstate]', window.location.pathname);
render(window.location.pathname);
});
render(window.location.pathname);
https://poiemaweb.com/js-spa
https://miracleground.tistory.com/165