Apply ssr to some components

[SamaneYaghoobi]

Hi, I want to know what should I do to apply ssr just to some components and other components or routes rendering client side as normal way?

[czco]

When we were building a site about Silicon Beach Tech Consulting we faced the same issue and on research came across this answer by @choonkending on reactgo

I haven't tested this myself, but what about trying to triggering a state in the componentDidMount lifecycle method?

Lifecycle

constructor(props) {
    super(props);
    this.state = { shouldRenderComponent: false };
}

componentDidMount() {
   this.setState({ shouldRenderComponent: true });    
}

render() {
    return (<div>{ this.state.shouldRenderComponent && <Component> }</div>);
}

or

Just check in render

render() {
    const shouldRender = typeof window !== 'undefined'; // 
    return (<div>{ shoulderRender && <Component }</div>);
}

or

Wrap it in a HOC

const onlyRenderInBrowser = ComposedComponent => class extends React.Component {
    render() {
         const shouldRender = some browser check;
         if (shouldRender) return <ComposedComponent {...this.props} />;
         return null;
    }
}

... Your component then remains pure

export default onlyRenderInBrowser(SomeComponent);

(I haven't tried any of the above, but that's how I would go about solving it). Hopefully that helps.

[SamaneYaghoobi]

@czco Thanks a lot, I will try this solution and inform you if it is helpful or not.
Thanks again.

[czco]

@SamaneYaghoobi no problem, did it work?

[SamaneYaghoobi]

@czco I read the issue that you linked and I think it doesn't related to Razzle and won't work.
It just check if user in browser or not, does it make sense?

[czco]

@SamaneYaghoobi razzle? what does razzle have to do with anything? we would love to provide an example but it looks like the authors of this repo aren't providing much support, we had to move a live project back to next.js. In any SSR framework this is how you make sure component doesnt not get rendered on the server
render(){
const isNotServer = typeof window !== 'undefined'
return (<div>{isNotServer && <YourComponent/></div>)
}

[cereallarceny]

Hey, my apologies for the long wait @SamaneYaghoobi - I'm looking to ensure this is fixed with version 2.0. If you're interested, I could really use your thoughts for what you'd like to see in the upcoming version. Feel free to comment on the issue here with any suggestions. :)

@czco I know it may be a bit late since you've already switched to Next.js. My apologies for the lack of progress.

[SamaneYaghoobi]

Hi @cereallarceny,
Thanks for your reply,
I noticed that you are going to shut down the cra-ssr project, So why do you update it?

[cereallarceny]

I updated it before I knew about Razzle, which I now suggest you use. It's basically what I was intending to build for version 2.

[SamaneYaghoobi]

@cereallarceny
Yeah, Razzle is great thanks Patrick :)