으 .. 제로초님 막혀서 다시 왔습니다 ㅠㅠ

자꾸 질문드려서 죄송합니다 ㅠㅠ

현재 메인페이지에서 새로고침 하면 로그인 유지가 잘 되지만,

헤더의 다른 링크를 눌러 들어간 후 , 새로고침을 하면 로그인이 다시 풀리게됩니다.

console창에 찍어보니 메인페이지에서는 index.js를 타서 getServerSideProrps를 실행해 새로고침을 해도 매 요청을 먼저 실행하지만 다른곳의 코드는 그렇지 않습니다

즉 _app.js와 같은 곳에서 getInitialProps를 선언해 전역적으로 관리를 해줘야한다는 생각이 들었는데

(_app.js에서는 getServerSideProps가 사용이 안되더라구요..)

공식문서에서는 app.js보다는 각 페이지마다 요청을 보내는것을 추천하고 있는데, 어떤 방법이 제일 좋은 방법일까요?

1.메인화면입니다(이곳에서는 새로고침을 해도 로그인 유지가 됩니다 index.js를 타기때문에)

2.index.js의 코드입니다.

import axios from 'axios';
import Head from 'next/head';
import React, { useEffect } from 'react';
import { END } from 'redux-saga';
import MainSection from '../components/MainSection';
import {
LOAD_PRODUCT_TYPE_REQUEST,
LOAD_USER_INFO_REQUEST,
} from '../reducers/action';
import wrapper from '../store/configureStore';

const index = () => {
console.log('index 페이지 들어옴');

// useEffect(() => {
// localStorage.getItem('vintage-info-user');
// }, []);

return (
<>
<Head>
<title>폴로딩고</title>
</Head>
{/* 섹션 */}
<MainSection />
{/* 상품페이지 */}
</>
);
};

export const getServerSideProps = wrapper.getServerSideProps(
async (context) => {
// index js의 리듀서 구조를 바꿔야함 중첩되게 끔

 axios.defaults.headers.Cookie = '';

// 로그인을 공유하는 상황을 막기 위해서
const cookie = context.req ? context.req.headers.cookie : '';

// console.log('쿠키 : ', cookie);
// defaults 쿠기 설정 (로그인 했을 경우에만)
if (context.req && cookie) {
 axios.defaults.headers.Cookie = cookie;
}

 context.store.dispatch({
type: LOAD_USER_INFO_REQUEST,
});

// 첫 파에지 랜딩에는 최근 등록된 상품 기준으로 보여주거나 업로드 날짜가 가장 최근인 애들을 보여줘야함
 context.store.dispatch({
type: LOAD_PRODUCT_TYPE_REQUEST,
data: 'all',
});

// 위에 REQUEST가 SUCCESS로 바뀔 때 까지 기다려주는 장치임
// 공식문서에 나옴
 context.store.dispatch(END);
await context.store.sagaTask.toPromise(); // store.sagatask에서 등록해놓음(index.js에서)
/// /////////////////////////////////////////////////
}
);
export default index;

하지만, 헤더쪽 다른 SHOP이런곳을 가서 새로고침을 하면 로그인이 풀리게됩니다 (이유는 index.js를 타지 않기 때문인데 app.js 에 전역으로 관리하게끔 만들어줘야하나요?)

Inflearn Community Q&A