Quiero implementar GetServerSideProps con SWR, pero no puedo evitar que el lado del cliente obtenga a pesar de que los datos se cargan desde el lado del servidor.

Aquí hay un ejemplo simplificado

1. Obtenemos una lista de palabras de la API con una longitud de palabra dada en getServerSide/getStaticProps y SSR/SSG construyen la página para una entrega rápida

2. El usuario interactúa con la página, lo que hace que iterateWordLength()

3. ahora vamos a buscar una lista de palabras actualizada con mutate

Qué sucede: SWR dispara dos veces con carga

1. Serverside se ejecuta solo una vez ✅
2. Uso de la lista de palabrasEffect fires: obtenga la palabra "foo" de mi getServerSideProps artificial y renderice ✅
3. WordClientSideFetcher se dispara ❌ (no debería ser porque ya tenemos los datos)
4. La lista de Wordlist changed incendios de nuevo ❌

no estoy usando useSWRImmutable porque mi buscador y los parámetros GET cambiarán según el estado de otra variable de estado

Configuré todas las opciones de revalidación como falsas... ¿por qué se dispara dos veces?

Index.js simplificado

 function Index( { fallback } ) { const [wordLength, setWordLength] = useState(DEFAULT_WORD_LENGTH); const { data: wordlist, mutate } = useSWR('/api/wordlist', clientSideFetcher, { fallbackData: fallback['/api/wordlist'], revalidateIfStale: false, // all set to false to stop that clientSideFetcher revalidateOnMount: false, revalidateOnFocus: false }) } useEffect(()=>{ // wordlength iterated mutate() // updates wordlist }, [wordLength]) useEffect(()=>{ console.log("### Wordlist changed") setWord( generateRandomWord() ) },[wordlist]) const iterateWordlength = () => { setWordlength(wordLength+1)} export async function staticFetcher() { const res = await fetch(API_URL) const data = await res.json() console.log(`### staticFetcher fetched ${data.length} words`) return new Wordlist(...data) } export async function getServerSideProps(context) { const staticWordlist = await staticFetcher(context) .catch( err => { return { notFound: true } }) const props = { fallback: { '/api/wordlist' : ["foo"] // temp replace the actual array } } return { props } }