SPA 새로고침 404 원리와 이해

spa 사이트는 인덱스가 아닌 페이지에서 새로고침을 하면 404가 뜰 때가 있다.
이것은 js 파일과 url이 매칭되지 않아서 그렇다. spa는 url이 여타 spa가 아닌 사이트의 url과 다르다. 실제 새로운 파일을 불러오는 것이 아닌 js를 이용해서 url (history)를 핸들링 중인 것이다. 때문에 새로고침시 해당 파일을 찾을 수 없어서 404가 뜬다.

이 문제를 해결하기 위해서 nginx에서 처리를 해도 좋고 node서버가 있다면 서버로 핸들링할 수도 있다.

보통 프론트에서는 node서버를 띄우는게 아니기 때문에 아래와 같은 설정을 해줘야 한다.

server {
	listen 8080 default_server;
    
    location / {
    	root ....
        try_files $uri $uri/ /index.html;
    }
}

try files 부분을 추가하면 404가 아닌 index.html로 접근 후 다시 올바른 js 흐름을 타게 되어 에러가 안나게 된다.

혹은 node에서는 아래와 같다.

app.get('*', () => {
    res.sendFile(path.join(__dirname,'경로/index.html'));
})

즉 모든 경로는 index.html로 가라란 뜻이다.