I want to make a shopify theme using react.
You have a bunch of template files that have access to global server-side variables with liquid e.g. {{ product.title }}
. Think wordpress or any other theme-based system.
/theme
/template
/index.liquid
/products.liquid
- Because this site is hosted on Shopify I don't have access to the server to render out react on the server dynamically.
- Because this is an e-commerce store I can't have pages not be rendered server side, for SEO reasons.
- I need to programmatically generate all of the pages in the template with react
render
locally, each template would have a component.
It's simple enough to pass the string versions of liquid variables to a component. What I'm not sure of is how to differentiate the props / components that are render out saved within a template and the instance of react in javascript that is running on the site. When the client runs react if the liquid variables are the default properties all the valued server-side variables will be converted to their string / variable counterpart this isn't what we want. React doesn't have the data, this is bad.
To fix this I thought about having two sets of properties, one getLiquidProps
that will be utilized when I call something like renderLiquid()
. Similar to the way react-async works. However what I really need is a way to read the existing values that the server wrote to the DOM and have those values be the component props. But this is us using the react server DOM as our datastore is this possible?
If I have a simple component for cart counter:
var CartCount = React.createClass({
getDefaultProps: function(){
return {
"count": '{{ cart.item_count }}'
}
},
render: function() {
return (
<div className="cartCount">
{ this.props.count }
</div>
)
}
});
The server will render
<div className="cartCount">
3
</div>
The client-side react will overwrite it again
<div className="cartCount">
{ this.props.count }
</div>
Cool, I was working on this with metalsmith here but eventually wanted to move it into React. Considering the constraints in local development, you would need to somehow leverage the API as well to speed up local modifications. For example, in this metalsmith library, I fetch all the data from the Shopify API, cache it locally, and re-render the site on every change. Ideally this would be hot-reload with React instead of Metalsmith.
I think you could definitely pull this off. The question becomes, how does one host the server-rendered React build on Shopify? For example, if I built a full app that uses my store's data, how would I then deliver that to a browser with the server-rendered data? A few problems arise:
A crazy approach:
Local development is really all that matters. After uploading files to Shopify, it doesn't really matter what they look like because liquid is messy anyway. So in local development if you could build a fully isomorphic Shopify/React app that Shopify could understand, you could use that on their server.
How do we get Shopify to understand it? We talk in their language - liquid.
When uploading the React app to Shopify, a few things need to happen:
With that process, although complex and annoying, you'll be able to build fully isomorphic React/Redux apps for Shopify with 100% SEO and client rendering. That would be sweet!
Thoughts?