[TIL] Next.js localStorage -> getSeverSIdeProps 우회통신

 

 

getServerSideProps (서버 사이드 렌더링) 페이지에서 getServerSideProps라는 함수를 내보낼 때, Next.js는 이 함수로 반환된 데이터를 사용하여 각 요청에 대해 이 페이지를 사전 렌더링합니다. 

주로 자주 변경되는 데이터를 최신으로 업데이트 하는 경우 유용하고 클라이언트 측에 번들되지 않는다.

 

context매개변수는 params,req,res,query를 포함한다.

이 함수는 이중 하나를 포함하는 객체를 반환해야한다

- props라고 명명된 객체 속성

- notfound(bool)로 명명된 속성

- redirect

 

 

 

문제

getServerSideProps내의 기능은 클라이언트 렌더링 이전에 수행된다.

즉 클라이언트 단에서 서버단의 데이터를 받을 순 있지만

일반적인 방법(next 노드 서버를 백엔드로 활용하지 않는다면)으로는 브라우저단의 데이터(localStorage)를 서버단으로 보낼 수 없다.

localStorage를 활용할 특정 훅을 만들어두었다.

 

function Edit() {
    const { getLocalStorage, setLocalStorage, isSet } = useLocalStorage();
    const [keywords, setKeywords] = useState<string[]>([]);
    const { handleChange } = useKeywords(keywords, setKeywords);

    useLayoutEffect(() => {
        const init = getLocalStorage('category') || initKeywords;
        setKeywords(init);
    }, []);

    function onClickApply() {
        if (keywords.includes('')) {
            // handle empty keyword case
            alert('키워드는 공백으로 두지 마세요.');
        } else {
            onPush('/main', setLocalStorage('category', keywords));
        }
    }

    return (
        <Layout>
            <StyledWrapperEdit>
                <StyledForm>
                    <h1>Category Edit</h1>
                    {keywords.map((keyword, index) => (
                        <StyledInput
                            key={index}
                            name={index.toString()}
                            type="text"
                            value={keyword}
                            onChange={handleChange}
                        />
                    ))}
                    {/* <StyeldMore type="button">
                        <AddIcon />
                    </StyeldMore> */}
                    <StyledButtonWrapper>
                        <StyeldButton
                            type="button"
                            onClick={() => {
                                setLocalStorage('category', initKeywords);
                                setKeywords(initKeywords);
                            }}
                        >
                            초기화
                        </StyeldButton>
                        <StyeldButton type="button" onClick={onClickApply}>
                            {isSet ? '적용완료' : '적용하기'}
                        </StyeldButton>
                    </StyledButtonWrapper>
                </StyledForm>
            </StyledWrapperEdit>
        </Layout>
    );
}

편집페이지에서 로컬스토리지를 이용한 편집 페이지 저장 및 편집 기능을 구현한다.

 

 

메인페이지 직전 로딩 페이지에서 로컬스토리지에서 꺼내어 myData 속성에 직렬화하여 로컬스토리지데이터를 삽입한다.

(해당 어플리케이션에서는 메인페이지 서드파티라이브러리의 서버사이드단 로딩 문제로 불가피하게 클라이언트단이 아닌 직전 로딩페이지를 두어 로딩스피너를 구현해야했다.)

 

 

메인페이지 getServerSideProps에서 쿠키 데이터를 req 매개변수로 받아 서버사이드단에서만 동작하는

서드파티라이브러리 (getVideoList 내부에 구현되어 있음)에 인자로 넘긴다.