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
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
El usuario interactúa con la página, lo que hace que iterateWordLength()
ahora vamos a buscar una lista de palabras actualizada con mutate
Qué sucede: SWR dispara dos veces con carga
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 } }