SSR 최소화 (PPR 대응)

[yiminwook]

• session

• theme

• lang

• userAgent

클라이언트에서 처리후 layout shift, hydration error, 로딩 처리 등... 대응

[yiminwook]

theme-csr branch

@pekochan069

theme-csr 하는거 만들어 봤는데 내가 봤을땐 zustand 담는 쪽이

typeof window 써서 삼항연상자로 초기값 바로 밀어 넣는데 약간 안티패턴 같음

liveuta/src/components/config/AppProvider.tsx

Lines 17 to 25 in 028cd0e

	const appStore = useRef(
	createAppStore({
	theme:
	typeof window !== 'undefined'
	? (localStorage.getItem('theme') as TTheme) || 'theme1'
	: 'theme1',
	isShowAcctSidebar: false,
	}),
	);

zustand에서 권장하는 방법은 useEffect를 써서 초기값을 변경하는걸 권장하는듯

zustand/persist도 작동은 초기값을 넣고 초기화될때 localStrage에서 읽어서 다시 덮는것 같음

님이 봤을때 어떤지 확인가능?

script쪽은 uta-tools astro 코드를 직접 적용할 수 없어서

next-theme repo src

위 오픈소스 참고했음

[pekochan069]

내가 리액트를 잘 아는건 아니여서 안티패턴같은건 잘 모름.
일단 내 생각은 테마는 딱 테마 컴포넌트 한 곳에서만 사용하니까 앱 컨텍스트에서 빼는게 맞는거같음.
그리고 일단 테마가 정상작동하게는 만들었는데 확인이 좀 더 필요할듯

[yiminwook]

어제 깜빡하고 작업하던걸 다 안올렸었네 깜빡이는건 고쳐놨는데 푸시하는걸 까먹

theme을 앱 컨텍스트에 넣은건 상태가 자주 바뀌지 않고 useStore 훅을 쓰면 필요한부분만 구독하여 랜더링 최적화가 가능함

초기값을 밀어넣어주기 위해 createStore를 사용한 경우 나중에 이런 전역 상태가 더 늘어나면
React.context로 감싸줘야 해서 context, provider, hook과 같이 자잘한 코드조각이 늘어나고
레이아웃 자체도 컨텍스트가 너무 많이 감싸고 있어 가독성이 떨어질 것 같음,
그래서 작은 store들은 앱 컨텍스트에 한번에 몰아 넣으려고 만들었음

(jotai에서 굳이 zustand로 바꾼것도 자잘한 상태를 많이 만들기 보다 적당한 사이즈에 스토어를 만들어서 select해서 구독하려고 바꿧음)

[yiminwook]

음 자바스크립트로 동적으로 theme style 넣아야 할경우도 생기면 전역 상태로 가지고 있는게 편하지 않을까?

[yiminwook]

생각해보니까 css var쓰니까 굳이 필요없을지도 ㅇㅇ 빼도 될듯

[yiminwook]

dev 브랜치 vercel에서 promotion해서 실운영 테스트

[yiminwook]

https://locize.com/blog/next-app-dir-i18n/

next-intl은 middleware, cookie 의존도가 높아서 i18next로 직접 구현할지 고민중 위 블로그 참고

[pekochan069]

확인

[yiminwook]

next-intl 필요없는 페이지 번역은 안들고 오도록 tree shaking 필요

amannn/next-intl#1