0
384
ViewsBackground image does not render on server (nextjs)
I am using NextJs. I want to apply a background image on the body and it should be rendered on the server-side.
Here is my code
Below is my App.js
import BodyStyle from '@components/Bodystyle';
return (
<>
<BodyStyle bgColor={`url("picture-url")`} />
<>);
Here is my BodyStyle.js
const BodyStyle = (props) => {
const { bgColor } =
props;
return (
<Head>
<style>{`body { background: ${bgColor} no-repeat center center fixed; background-size: cover;`}</style>
</Head>
);
The background is applied to the body but not from SSR
But there is a twist if I just copy the code from BodyStyles.js and paste in app.js the background image renders fine on the server
Here is the example code of the App.js
import Head from 'next/head';
return (
<Head>
<style>{`body { background: url(${url}) no-repeat center center fixed; background-size: cover;`}</style>
</Head>
);
Attached screenshots
Without background on SSR
With the background on SSR
What could be an issue? Any help
·
Juan Pablo Isaza
1 answers
Answer question0
i think its because you use to set bgcolor when there isn't any props yet try using it inside an useEffect or like this code:
const BodyStyle = ({bgColor}) => {
return (
<Head>
<style>{`body { background: ${bgColor} no-repeat center center fixed; background-size: cover;`}</style>
</Head>
);
·
Juan Pablo Isaza
Report
Answer question