React-virtualized: Display list items on server side rendering

[mrasoahaingo]

Hi!
Is there a work around to display List item on server side rendering?

  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        width={width}
        deferredMeasurementCache={cache}
        overscanRowCount={0}
        rowCount={items.length}
        rowHeight={cache.rowHeight}
        rowRenderer={({ index, key, parent, style }) => (
          <CellMeasurer
            cache={cache}
            columnCount={0}
            key={key}
            parent={parent}
            rowIndex={index}
          >
            <div style={style} role="row">
              {...items[index]}
            </div>
          </CellMeasurer>
        )}
      />
    )}
  </AutoSizer>

Here, width and height are both equal to 0, so there's no displayable items :(

<div style="overflow:visible;height:0;width:0">
  <div aria-label="grid" aria-readonly="true" class="ReactVirtualized__Grid ReactVirtualized__List" role="grid" style="box-sizing:border-box;direction:ltr;height:0;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:auto" tabIndex="0">

  </div>
</div>

Thanks!

[bvaughn]

This is because AutoSizer only measures after mounting (since it requires access to the DOM) and mounting doesn't happen in the context of SSR. I've got an idea for a "fix" for this though that I think will enable a better SSR story. I'll do a point release in a few moments to 9.12.0, after which point you could just do:

const ssrHeight = 200; // Slightly arbitrary value
const ssrWidth = 200;  // Determines the initial render size (for SSR)

// Then render it like so:
<AutoSizer defaultHeight={ssrHeight} defaultWidth={ssrWidth}>
  {({ height, width }) => (
    <List height={height} width={width} {...otherListProps} />
  )}
</AutoSizer>

Once your component mounts (after rendering on the client) the defaults you pass in will be replaced with actual values.

[bvaughn]

Fixed via fb9ead1. Released as 9.12.0. Hope it helps!

[mrasoahaingo]

Thanks!

[creativecoder10]

I am still finding similar issue . Though I have set the height and width of the parent and can see in the inspect element (including putting a background-color for the parent), its still showing height:0, width:0 for it