nextjs에서 "use client"와 getServerSideProps 함께 사용할 수 없는 문제

Question

ThemeProviderWrapper를 만들고 있습니다.새로고침하면 SSR을 통해 받아온 화면이 잠깐 보였다가 테마에 맞춰 변경되는 걸 고쳐보려고서버 사이드에서 cookie를 이용해서 테마 기본값을 설정했다가그 값을 받아와서 useLayoutEffect를 이용해서 실제로 화면을 그려주기 전에 테마를 적용해보려고 했는데요아래처럼 ThemeProviderWrapper 코드를 작성했습니다.getServerSideProps를 이용해 cookie에서 테마 값을 받아와 ThemeProviderWrapper의 prop으로 넘겨줍니다.ThemeProviderWrapper의 useLayoutEffect에서 배경색을 바꿔줍니다.그런데 이렇게 작성하니 useLayoutEffect와 ThemeProvider 때문에 "use client" 코드가 필수더라구요.하지만, getServerSideProps는 "use client" 코드가 있으면 정상적으로 실행되지 않았습니다.몇가지를 여쭈고 싶습니다.새로고침 시 테마에 맞춘 화면이 보이기 전에 SSR에서 렌더링된 화면이 잠깐 보이는 문제를 제가 위에서 작성한 코드들로 고칠 수 있는 게 맞나요?고칠 수 있다면 위 코드를 어떻게 수정하는 게 좋을까요?이 외에도 useState, useEffect를 사용하는 거의 모든 컴포넌트에서 "use client"를 추가해야 하는데 그럼 nextjs에서 제공하는 SSR 장점이 없어지지 않나요? 조금 개발하다보니 "use client"가 필요한 부분이 많던데 매번 이걸 추가해서 사용하는 게 맞는지 잘 모르겠습니다.코드를 첨부합니다.import { getThemeFromCookies } from "@/app/utils/theme.js"; import { lightTheme, darkTheme } from "@/app/styles/theme.js"; import GlobalStyle from "@/app/styles/global.js"; import { useLayoutEffect } from "react"; import { ThemeProvider } from "styled-components"; export async function getServerSideProps() { const themeCookie = await getThemeFromCookies(); return { props: { themeCookie } }; } export default function ThemeProviderWrapper({ children, themeCookie }) { useLayoutEffect(async () => { document.documentElement.style.backgroundColor = themeCookie === "light" ? lightTheme.bgColor : darkTheme.bgColor; }, []); return ( {children} ); }답변을 부탁드립니다.감사합니다.

ssalad · Answer

getServerSideProps 는 'useServer' 전용입니다nextjs의 server action에 대해 검색해보세요

몰랑토끼 · Answer

미들웨어는 안되나요

월급은나의빛 · Answer

화면이 번쩍거리는 문제는 사용자 설정을 읽어서 state 변수가 적용되기 전에 디폴트 테마가 적용되었다가 state 변수값이 다시 적용되어서 생기는 문제라고 하며, 해결책은 리액트가 아닌 javascript 즉시실행함수(IIFE)로 테마 초기값을 세팅하는 것이라고 합니다. 해당 함수가 완료될 때까지 렌더링이 block 되므로 번쩍거리는 일이 일어날 수 없다고 합니다. 그리고 나서 리액트에서 IIFE 에서 정의한 함수와 변수를 사용하면 된다고 합니다. (plain javascript와 react 를 연결해서 쓰는 게 신기하네요)다음 블로그에 참고해서 사용가능한 수준으로 구현되어 있습니다.Avoid Flash of Default Theme: An Implementation of Dark Mode in React App | A Blog by Hangindev

nextjs에서 "use client"와 getServerSideProps 함께 사용할 수 없는 문제

3개의 답변

Q&A 목록