Apply ssr to some components

SamaneYaghoobi commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

czco commented 5 years ago

@SamaneYaghoobi no problem, did it work?

SamaneYaghoobi commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@cereallarceny Yeah, Razzle is great thanks Patrick :)

cereallarceny / cra-ssr

Apply ssr to some components #54