Así que anteriormente migré mi código para usar Redux en mi proyecto Next.js. Aunque hizo que fuera más fácil de escalar, todavía tengo algunos problemas con él.
Básicamente, solía obtener datos del servidor getServerSideProps en la versión anterior. Pero se vuelve más complejo cuando pienso en obtener de una acción redux.
Por cierto, estoy usando redux-thunk.
Aquí está mi código:
acción.js
export const FetchPosts = () => async (dispatch: Dispatch) => { const { data } = await api.fetchPosts(); dispatch({ type: FETCH_ALL, payload: data }); }reductor.js
export default (state: any = [], action: AnyAction) => { switch (action.type) { case FETCH_ALL: return [...state, action.payload.data] default: return state; } }componente.tsx
const Component:FC = () => { const dispatch = useDispatch(); const posts = useSelector(state => state.posts); useEffect(() => { // Should i fetch in here? dispatch(getPosts()); }, []); return ( <div> {/* ... */} </div> ); } export async function getServerSideProps() { // Should i even fetch here? return { props: { posts } } }¿Alguien puede ayudar?
Si los datos que está obteniendo son importantes para fines de SEO, debe obtener datos en getServerSideProps . Entonces, cuando el servidor envía el HTML al lado del cliente, su html se completará con los datos (imagine que tiene una tienda de comercio electrónico y desea indexar su artículo de compras). PERO para usar el redux del lado del servidor, debe implementar next-redux-wrapper
Si los datos no son importantes para el SEO, por ejemplo, el administrador necesita ver los datos del usuario, puede obtener los datos del lado del cliente.