SSR is not working in case of GroupedVirtuoso

[niparx]

When I use Virtuoso container, everything is working as expected

1. initialItemCount is not defined:

<div id="555">
  <Virtuoso
    totalCount={1}
    item={(itemIndex: number) => {
      return <h2>My index: {itemIndex}</h2>;
    }}
  />
</div>

Result (no items are populated):

<div id="555">
<div style="height:40rem;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;outline:none" tabindex="0">
<div style="top:0;position:absolute;height:100%;width:100%;overflow:absolute">
<div style="margin-top:0px">
<!-- --> 
</div>
</div>
<div style="height:0px;position:absolute;top:0">
</div>
</div>
</div>

2. initialItemCount is defined:

<div id="555">
  <Virtuoso
    totalCount={1}
    item={(itemIndex: number) => {
      return <h2>My index: {itemIndex}</h2>;
    }}
    initialItemCount={1}
  />
</div>

Result (one item is populated):

<div id="555">
<div style="height:40rem;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;outline:none" tabindex="0">
<div style="top:0;position:absolute;height:100%;width:100%;overflow:absolute">
<div style="margin-top:0px">
<div data-index="0" data-known-size="30">
<h2>My index: <!-- -->0</h2>
</div>
</div>
</div>
<div style="height:30px;position:absolute;top:0">
</div>
</div>
</div>

Meanwhile, I can not do the same with GroupedVirtuoso

1. initialItemCount is not defined:

<div id="555">
  <GroupedVirtuoso
    groupCounts={[1]}
    group={(groupIndex: number) => {
      return <h2>Group index: {groupIndex}</h2>;
    }}
    item={(itemIndex: number, groupIndex: number) => {
      return (
        <h3>
          Group index: {groupIndex}. Item index: {itemIndex}
        </h3>
      );
    }}
    initialItemCount={1}
  />
</div>

Result (no items are populated):

<div id="555">
<div style="height:40rem;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;outline:none" tabindex="0">
<div style="top:0;position:absolute;height:100%;width:100%;overflow:absolute">
<div style="margin-top:0px">
<!-- -->
</div>
</div>
<div style="height:0px;position:absolute;top:0">
</div>
</div>
</div>

2. initialItemCount is defined:

<div id="555">
  <GroupedVirtuoso
    groupCounts={[1]}
    group={(groupIndex: number) => {
      return <h2>Group index: {groupIndex}</h2>;
    }}
    item={(itemIndex: number, groupIndex: number) => {
      return (
        <h3>
          Group index: {groupIndex}. Item index: {itemIndex}
        </h3>
      );
    }}
    initialItemCount={1}
  />
</div>

Result (no items are populated):

<div id="555">
<div style="height:40rem;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;outline:none" tabindex="0">
<div style="top:0;position:absolute;height:100%;width:100%;overflow:absolute">
<div style="margin-top:0px">
<!-- -->
</div>
</div>
<div style="height:0px;position:absolute;top:0">
</div>
</div>
</div>

May be I am doing something wrong, or GroupedVirtuoso just don't support SSR?

[petyosi]

You are doing nothing wrong - just a missing feature. I never really got to that. I am currently working actively on the code base, so I hope I will be able to get to that.

[Alexzzz91]

HI, i want to add SSR feature, if you have recommendations please tell me =)

[petyosi]

Grouped Virtuoso supports SSR rendering in v1 (currently in beta). Installation instructions (and breaking changes) are described in #203.