Skip to main content

How useContent works

On server-side render, useContent immediately returns the data in cache for the content source. The system uses the first server-side render pass to gather all the content source requests and the second to make the data available. 

On client-side render, useContent first returns the data that is in cache. If your component rendered on the server-side, then it should have some data in cache. If the data is not expired, the system makes no additional render. If the data is missing (if the server-side render failed or if the component is rendered on only the client-side) or expired, the useContent hook makes a request to get fresh data. If that request succeeds, the component calling the useContent hook re-renders with the new data. A functional component always re-renders when the data from a hook changes. (You can experiment with useContext for a pure React example).

In the event of a fetch failure, if you don't catch the useContent failures, the React component throws an exception, which stops the render of anything in that component. You can handle error scenarios of useContent and make your feature component not render anything or render a fallback content or a placeholder.

Following React's rule of hooks, you should never conditionally call a hook. If you don't want to use the data from the hook, you can call useContent and then ignore the results when you're rendering on server-side. If you prefer to avoid the call completely, you could pass a null value into the source for the useContent