walmartlabs / react-ssr-optimization Goto Github PK

I'm having issues using this module with webpack. For example, here is my app:

const componentOptimization = require('react-ssr-optimization');
import React from 'react';
import ReactDomServer from 'react-dom/server';

const componentOptimizationRef = componentOptimization({
  components: {
    HelloWorld: function (props) {
      console.log('in HelloWorld cache check function'); // eslint-disable-line
      return props.text;
    }
  },
  lruCacheSettings: {
    max: 500
  }
});

let renderCount = 0;

class HelloWorld extends React.Component {
  render() {
    renderCount++;
    return React.DOM.div(null, this.props.text);
  }
}

HelloWorld.propTypes = {
  text: React.PropTypes.string
};

// Cache Miss
ReactDomServer.renderToString(React.createFactory(HelloWorld)({text: "Hello World X!"}));
console.log('renderCount is', renderCount);

// Cache Hit
ReactDomServer.renderToString(React.createFactory(HelloWorld)({text: "Hello World X!"}));
console.log('renderCount is', renderCount);

setInterval(() => {
  console.log('cache length is', componentOptimizationRef.cacheLength()); // eslint-disable-line
}, 3000);

After bundling and executing, this is the output:

renderCount is 1
renderCount is 2
cache length is 0
cache length is 0
cache length is 0
cache length is 0
cache length is 0
...

Looking at the keyGenerator function in the docs, it appears to have this method signature:

function keyGenerator(props) { ... }

Is it possible to inspect context as well? I would need to include data from the context in my key.

Thanks!

Hello Is this repo still maintained? can be used in production?

Does this project work with React streaming, i.e renderToNodeStream ?

Have react and react-dom listed in package.json causes NPM to create a local copy of the library. Running two versions of React then create an incompatibility between the library and React.
This was tested with the main application package.json containing version ^15.3.0 and electrode-react-srr-optimiziation containing ^0.14.8.

I understand versioning is required so you can maintain compatibility with released React versions but in this instance it has caused an incompatibility.

The server does not render the right URLs for images. e.g. we get:

<img src="/5d5d9eefa31e5e13a6610d9fa7a283bb.svg" ... />

instead of

<img src="/static/media/logo.5d5d9eef.svg" ... />

So the page looks broken while the JS is loaded....

Firstly, I think this framework is a great idea. Totally solved our concern of react's sever rendering. Great work!

My problem is : I run a react server with this framework on my local machine. I don't want change the NODE_ENV value. But I still need to test if this is functioning. So I change the original code of this line
https://github.com/walmartlabs/react-ssr-optimization/blob/master/lib/index.js#L47
to if (false && process.env.NODE_ENV !== "production") {:

But I got this:
TypeError: Can't add property _instantiateReactComponent, object is not extensible

How come? Is it related to my react's version? My react's version is 15,

There is an error for missing reference of following 2 references.

const InstantiateReactComponent = require("react-dom/lib/instantiateReactComponent");
const escapeTextContentForBrowser = require("react-dom/lib/escapeTextContentForBrowser");

Is it possible for you guys to update this package for react and react-dom 16.4.0?
I am also happy to raise a PR.

Template values are hydrated without escaping possible harmful user input.

Hey can't figure out what should I use, what is the difference?

The idea is sound. Is there any up to date alternative to this lib on the market? One that supports React 18

So, imagine I've a component that changes his behaviour for logged users. I think that's not worth it to cache that component as it will literally fill the cache with components that are not used as some general ones. Is there any way to avoid caching by a prop? For example, returning false?

If not, is it something that you consider? Is something that if you get a PR will be glad to merge?

Thanks!

When using the cache on a particular component the cache causes the server to return some unexpected behaviour.

example: const MyComponent = (props) => (<div>{props.name}</div>)

MyComponent: {
  templateAttrs: ['name']
}

Now on the server side, I pass in something with a html equivalent value:
<MyComponent name={'My Name & name 2'} />

this gets put in the cache as something like: <div>${name}</div>

When MyComponent is pulled from the cache and string replaced, & is placed instead of &.
The next time the component is rendered it returns & If caching is not enabled the problem is not present.

Before we start working with this library I wanted to test out the result of caching locally to make sure I am setting the caching strategy variables templateAttrs and cacheAttrs correctly i.e. I want to make sure I don't miss a variable in cacheAttrs that could cause a incorrect cached response. This is also something that would be helpful to other developers when making component changes so they can confirm they did not break the caching strategy or to write tests around the caching strategy. Currently the library uses NODE_ENV exclusively, but it would be helpful to have a specific env var maybe REACT_SSR_OPTIMIZATION_ENV with a fallback to NODE_ENV. Looks like all that would have to change is this line https://github.com/walmartlabs/react-ssr-optimization/blob/master/lib/index.js#L44 so if this makes sense let me know and I can submit a PR.

If you have plenty of components it's hard to keep track of everything, and It seems to me that you can actually cache everything with a template type of cache and it should work or I'm missing something?

Thanks

Brilliant work. I'm currently trying to get this working on a basic level in a project with Webpack and Babel.
It's an universal app and I have babel initialised as require('babel-register') ({}). Then shortly after I have the implementation of electrode-react-ssr-optimization. I then use imports instead of require.
The issue was the cache is returning 0 length and the key generator function appears to have not been called.
I believe webpack might be using it's own require code on transpilation. Was wondering if you had any experience with this before I go digging in.

Hi!

We want to try your package in production but unfortunately it only works with React v14. Will it be compatible with new versions?